zoukankan      html  css  js  c++  java
  • Javascript+Dom(加减乘除计算器)

    计算器介绍:只能进行加减乘除,提示用户输入数字,正则表达式限制用户只能输入数字(在用户输入时限制),如果出现除零操作答案为0;

     有两种针对不同运算符的解决方法:

      1. 使用eval() 函数 //函数参考http://www.w3school.com.cn/jsref/jsref_eval.asp

        result=eval(num1+op+num2) //可以不用考虑操作符,要对 除零 操作特别的处理下即可。

      【特别说一下,在php中出现eval()要特别注意(一句话木马),更多信息自行Google。】

      2.使用switch进行比对,见代码。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>2014***'s web site homework</title>
     6 <script type="text/javascript">
     7     function calculator(){
     8         var nums = document.getElementsByName("num");
     9         var op = document.getElementsByName("op");
    10         var result = document.getElementsByName("rs");
    11         var n1 = parseFloat(nums[0].value);
    12         var n2 = parseFloat(nums[1].value);
    13         switch(op[0].value){
    14             case "add" : result[0].value = n1 + n2 ;break;
    15             case "min" : result[0].value = n1 - n2 ;break;
    16             case "mul" : result[0].value = n1 * n2 ;break;
    17             case "div" : result[0].value = (n2==0?0:n1/n2); break;
    18         }
    19     }
    20 </script>
    21 </head>
    22 
    23 <body>
    24 <input type="text" name="num" onclick="if(this.value == '请输入要计算的第一个数字')this.value =' ';" value="请输入要计算的第一个数字" onkeyup="value=value.replace(/[^d]/g,'') " />
    25 <select name="op" size="1">
    26     <option value="add">+</option>
    27       <option value="min">-</option>
    28     <option value="mul">*</option>
    29     <option value="div">/</option>
    30 </select>
    31 <input type="text" name="num" onclick="if(this.value == '请输入要计算的第二个数字')this.value =' ';" value="请输入要计算的第二个数字" onkeyup="value=value.replace(/[^d]/g,'') " />
    32 <input type="submit" onclick="calculator()" value="=" />
    33 <input type="text" name="rs" value="这里显示您的结果" disabled/>
    34 </body>
    35 </html>
  • 相关阅读:
    第四次作业--项目选题报告(团队)
    第三次作业--团队展示(团队)
    第二次作业——个人项目实战
    2017软件工程实践
    Unity3D游戏开发——显示物品的仓库UI
    Unity3D游戏开发——物品存储:List与Dictionary
    Unity3D游戏开发——编程实现游戏管理器
    Unity3D游戏开发——访问集中式共享模块的设计模式
    Unity3D游戏开发——收集当前关卡游戏中分散的物件
    福州大学软工1816 K 班助教总结
  • 原文地址:https://www.cnblogs.com/A--Q/p/5974505.html
Copyright © 2011-2022 走看看