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

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

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

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

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

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>2014***'s web site homework</title>

 <script type="text/javascript">

     function calculator(){

         var nums = document.getElementsByName("num");

         var op = document.getElementsByName("op");

         var result = document.getElementsByName("rs");

         var n1 = parseFloat(nums[0].value);

         var n2 = parseFloat(nums[1].value);

         switch(op[0].value){

             case "add" : result[0].value = n1 + n2 ;break;

             case "min" : result[0].value = n1 - n2 ;break;

             case "mul" : result[0].value = n1 * n2 ;break;

             case "div" : result[0].value = (n2==0?0:n1/n2); break;

         }

     }

 </script>

 </head>

 <body>

 <input type="text" name="num" onclick="if(this.value == '请输入要计算的第一个数字')this.value =' ';" value="请输入要计算的第一个数字" onkeyup="value=value.replace(/[^\d]/g,'') " />

 <select name="op" size="1">

     <option value="add">+</option>

       <option value="min">-</option>

     <option value="mul">*</option>

     <option value="div">/</option>

 </select>

 <input type="text" name="num" onclick="if(this.value == '请输入要计算的第二个数字')this.value =' ';" value="请输入要计算的第二个数字" onkeyup="value=value.replace(/[^\d]/g,'') " />

 <input type="submit" onclick="calculator()" value="=" />

 <input type="text" name="rs" value="这里显示您的结果" disabled/>

 </body>

 </html>

Javascript+Dom(加减乘除计算器)的更多相关文章

  1. 纯javascript代码编写计算器程序

    今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...

  2. Javascript + Dom知识点总结

    Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...

  3. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  5. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  6. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  7. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  8. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  9. 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...

随机推荐

  1. “CEPH浅析”系列之六——CEPH与OPENSTACK

    在 <"Ceph浅析"系列之二--Ceph概况>中即已提到,关注Ceph的原因之一,就是OpenStack社区对于Ceph的重视.因此,本文将对Ceph在OpenSta ...

  2. Android性能优化文章转载

    今天看到几篇比较好的文章就转了!(链接如下) 转载注明出处:Sunzxyong Android性能优化之Bitmap的内存优化 Android性能优化之常见的内存泄漏 Android最佳实践之Syst ...

  3. zabbix 监控MySQL

    现在我来说一下我的监控环境 zabbix-3.0.3 MySQL-5.6.23 1.首先我们要登录MySQL,创建一个监控MySQL的用户 GRANT USAGE,PROCESS,SUPER,REPL ...

  4. supervisor program配置实例

    program 配置 上面我们已经把 supervisrod 运行起来了,现在可以添加我们要管理的进程的配置文件.可以把所有配置项都写到 supervisord.conf 文件里,但并不推荐这样做,而 ...

  5. mxnet的python包导入的前前后后

    mxnet底层的代码是cpp写的, 然后在它上面封装提供了R, python, scala和matlab的接口. 我现在只关注python. 如何使用mxnet的python接口? 自然是通过impo ...

  6. Spring Security3学习实例

    Spring Security是什么? Spring Security,这是一种基于Spring AOP和Servlet过滤器的安全框架.它提供全面的安全性解决方案,同时在Web请求级和方法调用级处理 ...

  7. 【CodeForces 697C】Lorenzo Von Matterhorn（LCA）

    Least Common Ancestors 节点范围是1~1e18,至多1000次询问. 只要不断让深的节点退一层(>>1)就能到达LCA. 用点来存边权,用map储存节点和父亲连边的权 ...

  8. Thinking in java学习笔记之垃圾回收器如何工作

    垃圾回收器使得java在堆上分配空间的速度可以和其他语言从堆栈上分配空间的速度媲美.

  9. 检测是否是IE浏览器

    浏览器识别版本方法 //使用说明返回的是一个对象{"browser":"[IE]...","version":"11.0" ...

  10. Matlab中fsolve传递系数变量

    比如AX= b,求解x,但是要找不同b下的x,100个b. fsolve(‘fun,[X0,b])这样是不行的,因为这样的话b也当成了变量,也会变. 两种方法 1.全局变量 global b;多个的话 ...