效果图：
电脑端：
手机端：
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿华为计算器</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ overflow: hidden; } .calculator{ width: 300px; margin: 10px auto; border: 1px solid #E4E4E4; } .calc-screen p{ background-color: #fff; height: 60px; line-height: 60px; text-align: right; padding: 0px 10px; overflow-x: hidden; } .calc-in{ font-size: 20px; font-weight: bold; } .calc-out{ color: darkgray; } table{ border-collapse: collapse; } .calc-btn td{ width: 75px; height: 60px; line-height: 60px; text-align: center; background-color: #ffffff; border: 1px solid #E4E4E4; margin-left: -1px; margin-right: -1px; font-size: 20px; cursor: pointer; } .calc-btn td:hover{ background-color: #EAEAEA; } .del{ background: url("del.jpg") no-repeat 25px; } .calc-btn .bc{ background-color: #F5F5F5; } .calc-btn td.eq:hover{ background-color: #019DB1 } .fcg{ color: #00ACC2; } </style> </head> <body> <div class="calculator" id="calculator"> <form action="" name="calculator" method="get"> <div class="calc-screen"> <!-- 输入的数据 --> <p class="calc-in" id="calc-in"></p> <!-- 输出的运算结果 --> <p class="calc-out" id="calc-out"></p> </div> <div class="calc-btn" id="calc-btn"> <table> <tr> <td class="bc">mc</td> <td class="bc">m+</td> <td class="bc">m-</td> <td class="bc">mr</td> </tr> <tr> <td class="fcg bc" onclick="clearScreen()">c</td> <td class="fcg bc" onclick="command('÷')">÷</td> <td class="fcg bc" onclick="command('×')">×</td> <td class="del bc" onclick="del()"></td> </tr> <tr> <td onclick="command(7)">7</td> <td onclick="command(8)">8</td> <td onclick="command(9)">9</td> <td class="fcg bc" onclick="command('-')">-</td> </tr> <tr> <td onclick="command(4)">4</td> <td onclick="command(5)">5</td> <td onclick="command(6)">6</td> <td class="fcg bc" onclick="command('+')">+</td> </tr> <tr> <td onclick="command(1)">1</td> <td onclick="command(2)">2</td> <td onclick="command(3)">3</td> <td rowspan="2" style="color: #fff;background-color: #00ACC2" class="eq" onclick="calc()">=</td> </tr> <tr> <td onclick="command('%')">%</td> <td onclick="command(0)">0</td> <td onclick="command('.')">.</td> </tr> </table> </div> </form> </div> <script> //兼容屏幕 screenW = window.screen.width;//屏幕分辨率 screenH = window.screen.height;//屏幕分辨率 var calculator = document.getElementById("calculator"); var calc_btn = document.getElementById("calc-btn").getElementsByTagName("td"); console.log(document.body.clientWidth) if(document.body.clientWidth<600){ calculator.style.width = screenW+"px"; calculator.style.height = screenH+"px"; calculator.style.border = "none"; calculator.style.margin = "0"; for(var i = 0;i<calc_btn.length;i++){ calc_btn[i].style.width = screenW/4+"px"; calc_btn[i].style.height = (screenH-120)/6 + "px"; } } var calcIn = document.getElementById("calc-in"); var calcOut = document.getElementById("calc-out"); //输入数据函数 function command(str) { calcIn.innerHTML = "" ? calcIn.innerHTML = str : calcIn.innerHTML =calcIn.innerHTML+str; } //计算数据函数 function calc() { calcOut.innerHTML = eval(calcIn.innerHTML.replace(/×/g,"*").replace(/÷/g,"/").replace(/%/,"/100")); if(calcOut.innerHTML == "undefined"){ calcOut.innerHTML = ""; } } //清屏函数 function clearScreen() { calcIn.innerHTML = ""; calcOut.innerHTML = ""; } //每次删除一位数据的函数 function del() { calcIn.innerHTML = calcIn.innerHTML.substr(0,calcIn.innerHTML.length-1); } </script> </body> </html>
小图标：
