JavaScript 如何实现简易计算器功能? 下面本篇文章通过代码示例来给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
制作能进行加减乘除的简易计算器, 主要是练习动态注册事件. 因以练习为主, 所以包含了较多基础方法.
效果图:
好了, 直接上代码
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 简易计算器
- </title>
- <script type="text/javascript">
- Windows.onload = function() {
- document.onclick = function() {
- var ipts = document.getElementsByTagName("input");
- for (var i = 0; i < ipts.length; i++) { // 得到值和符号
- if (ipts[i].type == "text") {
- switch (i) {
- case 0:
- num1 = ipts[i].value;
- num1 = Number(num1);
- break;
- case 1:
- opt = ipts[i].value;
- break;
- case 2:
- num2 = ipts[i].value;
- num2 = Number(num2);
- break;
- }
- }
- }
- var res; // 结果
- switch (opt) { // 通过得到的值和符号进行计算
- case "+":
- res = num1 + num2;
- break;
- case "-":
- res = num1 - num2;
- break;
- case "*":
- res = num1 * num2;
- break;
- case "/":
- res = num1 / num2;
- break;
- }
- var r = document.getElementById("result");
- r.value = res;
- }
- }
- </script>
- </head>
- <body>
- <input type="text">
- <input type="text">
- <input type="text">
- =
- <input type="text" id="result">
- <input type="button" value="计算" id="btn">
- </body>
- </HTML>
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17434.html