网页计算器是由HTML和CSS以及最重要的JavaScript来构建出来的,能和普通的计算器一样进行各种运算包括开根号等等的复杂运算,并且有助于理解JavaScript中的面向对象和函数调用并且全长代码只有80行,是最适合新手的小项目了
不多BB上代码:
<!doctype html> <html lang="en"> <head> <!-- 添加文档头部内容 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <meta name="author" content="king"> <meta name="revised" content="king,08/05/2017"> <meta name="generator" content="WebStorm 2016.2.4"> <meta name="description" content="CSS & CSS3"> <meta name="keywords" content="HTML5, CSS, JavaScript"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>JavaScript 在线计算器</title> </head> <body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - 在线计算器(Calculator)</nav> </header> <hr> <!-- 添加文档主体内容 --> <table> <tr> <td colspan="1"> <input type="text" id="id-input-text-calculator" /> </td> <td colspan="1"> <input type="button" id="id-input-btn-calculator" onclick="on_cal_click()" value="计算"/> </td> <td colspan="1"> <div id="id-div-result"></div> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-1" onclick="on_btn_click(this.id)" value="1">1</button> <button type="button" id="id-btn-2" onclick="on_btn_click(this.id)" value="2">2</button> <button type="button" id="id-btn-3" onclick="on_btn_click(this.id)" value="3">3</button> <button type="button" id="id-btn-add" onclick="on_btn_click(this.id)" value="+">+</button> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-4" onclick="on_btn_click(this.id)" value="4">4</button> <button type="button" id="id-btn-5" onclick="on_btn_click(this.id)" value="5">5</button> <button type="button" id="id-btn-6" onclick="on_btn_click(this.id)" value="6">6</button> <button type="button" id="id-btn-minus" onclick="on_btn_click(this.id)" value="-">−</button> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-7" onclick="on_btn_click(this.id)" value="7">7</button> <button type="button" id="id-btn-8" onclick="on_btn_click(this.id)" value="8">8</button> <button type="button" id="id-btn-9" onclick="on_btn_click(this.id)" value="9">9</button> <button type="button" id="id-btn-times" onclick="on_btn_click(this.id)" value="*">×</button> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-0" onclick="on_btn_click(this.id)" value="0">0</button> <button type="button" id="id-btn-c" onclick="on_btn_click(this.id)" value="c">C</button> <button type="button" id="id-btn-equal" onclick="on_btn_click(this.id)" value="=">=</button> <button type="button" id="id-btn-divide" onclick="on_btn_click(this.id)" value="/">÷</button> </td> </tr> </table> <script type="text/javascript"> function on_cal_click() { var v_cal = document.getElementById("id-input-text-calculator").value; var v_result = eval(v_cal); document.getElementById("id-div-result").innerText = " 结果: " + v_result; } function on_btn_click(thisid) { var btn = document.getElementById(thisid); btn.addEventListener('click', function(event) { var v_value = event.target.value; console.log(v_value); if(v_value == "c") { document.getElementById("id-input-text-calculator").value = ""; } else if(v_value == "=") { on_cal_click(); } else { document.getElementById("id-input-text-calculator").value += v_value; } }, false); } </script> </body> </html>
完成之后的运行效果:
其中并没有使用css进行过多的渲染因为主要是对JavaScript的操作进行考验的,大家有兴趣的可以自己试试渲染一下。
在代码中第14~58行的代码通过