效果图如下：
html代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>calculator</title> <link type="text/css" href="https://www.jb51.net/style.css" > <script type="text/javascript" src="https://www.jb51.net/contain.js"></script> <title>Document</title> </head> <body> <div> <form> <input type="text" value=""> <br> <input type="button" value="TYNAM"> <input type="button" value="AC"> <input type="button" value="<-"> <input type="button" value="https://www.jb51.net/"> <br> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="*"> <br> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="+"> <br> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="-"> <br> <input type="button" value="0"> <input type="button" value="."> <input type="button" value="="> </form> </div> </body> </html>
CSS代码如下：
* { border: none; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } .calculator { background-color: #fff; height: 600px; margin: 50px auto; width: 600px; } form { background-color: rgb(75, 70, 71); padding: 5px 1px auto; width: 245px; } .btn { outline: none; cursor: pointer; font-size: 20px; height: 45px; margin: 5px 0 5px 10px; width: 45px; } .btn:first-child { margin: 5px 0 5px 10px; } #display { outline: none; background-color: #dededc; color: rgb(75, 70, 71); font-size: 40px; height: 47px; text-align: right; width: 224px; margin: 10px 10px auto; } .number { background-color: rgb(143, 140, 140); color: #dededc; } .operator { background-color: rgb(239, 141, 49); color: #ffffff; } .equal{ width: 105px; } .txt{ font-size:12px; background: none; }
JS代码如下：
/* display clear */ function cleardisplay() { document.getElementById("display").value = ""; } /* del */ function del() { var numb = ""; numb = document.getElementById("display").value; for(i=0;i<numb.length;i++) { document.getElementById("display").value = numb.substring(0,numb.length-1); if(numb == '') { document.getElementById("display").value = ''; } } } /* recebe os valores */ function get(value) { document.getElementById("display").value += value; } /* calcula */ function calculates() { var result = 0; result = document.getElementById("display").value; document.getElementById("display").value = ""; document.getElementById("display").value = eval(result); };