HTML+CSS 布局
如下图：
最外层使用div然后margin:auto;水平居中显示用户框我用的也是一个div 属性：text-align:right;文本右对齐table表格：5行4列 加上 border-radius圆角属性
<style>.panel {width: 270px;height: 400px;margin: auto;background-color: black;overflow: hidden;}.panel>div {height: 70px;width: 100%;}table {width: 270px;height: 300px;margin: auto;text-align: center;}table tr td {width: 20%;border-radius: 50%;cursor: pointer;}table tr:nth-last-child(1) td:nth-child(1){border-radius: 140px;}table tr:nth-child(1) td {background-color: #7c7c7c;color: #281622;}table tr td:nth-last-child(1) {background-color: #fc8e39;color: #fff;}table tr td {background-color: #2c2c2c;color: #fff;}.panel>div {color: #fff;font-size: 38px;margin-top: 30px;text-align: right;}</style><body><div class="panel"><div id="show"></div><table border="0" cellspacing=8><tr><td οnclick="del()">del</td><td οnclick="c()">C</td><td οnclick="number(this)">%</td><td οnclick="number(this)">/</td></tr><tr><td οnclick="number(this)">7</td><td οnclick="number(this)">8</td><td οnclick="number(this)">9</td><td οnclick="number(this)">*</td></tr><tr><td οnclick="number(this)">4</td><td οnclick="number(this)">5</td><td οnclick="number(this)">6</td><td οnclick="number(this)">-</td></tr><tr><td οnclick="number(this)">1</td><td οnclick="number(this)">2</td><td οnclick="number(this)">3</td><td οnclick="number(this)">+</td></tr><tr><td colspan="2" οnclick="number(this)">0</td><td οnclick="number(this)">.</td><td οnclick="calculate()">=</td></tr></table></div></body>
JS 代码
由于JS代码没有多少且有注释，这里就不详细介绍了。
<script>// 获取显示框var show = document.getElementById('show');// 获取用户输入的数字，并显示function number(a) {show.innerText += a.innerText;}// 运算函数// 思路：1.判断显示框是否为空//2.使用 eval(); 输出用户输入的算数function calculate() {show.innerText = show.innerText == "" ? "" : eval(show.innerText);}// 删除全部 del 函数function del() {show.innerText = "";}// 删除最后一位function c() {show.innerText = show.innerText.slice(0, show.innerText.length - 1);}</script>
