<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>A Simple Calculator</title> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <style> * { font-family: 'Inconsolata', monospace; color: #555; } body { background-color: #3fb399; } .container { width: 320px; background-color: white; margin: 120px auto; } table { width: 100%; border-color: #f4f4f4; } td { width: 25%; } button { width: 100%; height: 70px; font-size: 24px; background-color: white; border: none; } #inputLabel { height: 120px; font-size: 40px; vertical-align: bottom; text-align: right; padding-right: 16px; background-color: #ececec; } </style> </head> <body> <div class="container"> <table border="1" cellspacing="0"> <tr> <td colspan="4" id="inputLabel">0</td> </tr> <tr> <td colspan="3"><button onclick="pushBtn(this);">AC</button></td> <td><button onclick="pushBtn(this);">/</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">7</button></td> <td><button onclick="pushBtn(this);">8</button></td> <td><button onclick="pushBtn(this);">9</button></td> <td><button onclick="pushBtn(this);">*</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">4</button></td> <td><button onclick="pushBtn(this);">5</button></td> <td><button onclick="pushBtn(this);">6</button></td> <td><button onclick="pushBtn(this);">-</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">1</button></td> <td><button onclick="pushBtn(this);">2</button></td> <td><button onclick="pushBtn(this);">3</button></td> <td><button onclick="pushBtn(this);">+</button></td> </tr> <tr> <td colspan="2"><button onclick="pushBtn(this);">0</button></td> <td><button onclick="pushBtn(this);">.</button></td> <td><button onclick="pushBtn(this);">=</button></td> </tr> </table> </div> <script> var inputLabel = document.getElementById('inputLabel'); function pushBtn(obj) { var pushed = obj.innerHTML; if (pushed == '=') { // Calculate inputLabel.innerHTML = eval(inputLabel.innerHTML); } else if (pushed == 'AC') { // All Clear inputLabel.innerHTML = '0'; } else { if (inputLabel.innerHTML == '0') { inputLabel.innerHTML = pushed; } else { inputLabel.innerHTML += pushed; } } } </script> </body> </html>
1,933 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 8元 才能查看此处内容!立即支付