计算器介绍：只能进行加减乘除，提示用户输入数字，正则表达式限制用户只能输入数字（在用户输入时限制），如果出现除零操作答案为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. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  2. iOS开发小技巧--图片的圆角处理

    图片圆角处理方案一: 缺点是图片多了感觉卡 设置图层的CornerRadius属性 -- 设置了圆角后,运行程序没有反应,多半是没有设置下面这句:让内容遵循设置的边缘 masksToBounds = ...

  3. python之旅3

    1 collections系列 方法如下 class Counter(dict): '''Dict subclass for counting hashable items. Sometimes ca ...

  4. 数据库开发基础 SQL Server 数据库的备份、还原与分离、附加

    认识数据库备份和事务日志备份 数据库备份与日志备份是数据库维护的日常工作,备份的目的是 一.在于当数据库出现故障或者遭到破坏时可以根据备份的数据库及事务日志文件还原到最近的时间点将损失降到最低点 二. ...

  5. HTML文本域属性设置

    1.设置文本域的字体 <TEXTAREA STYLE="font-size:9pt;font-family:verdana;color:#333333">输入内容< ...

  6. python安装失败0x80240017

    安装KB2999226更新补丁后, 可以正常安装python3.5. 此更新包在vs2015的patch包里有.Microsoft下载中心也有,这里列出的适用于win7x86: Windows 7 更 ...

  7. 7 static关键字

    class Person { static int i; static void fun() { System.out.println("我是静态函数"); } } 在静态函数中不 ...

  8. linux 下删除重复行-- uniq 与 awk

    $ cat file liw liw liw hdsui mdksjd liw $ cat file | uniq -u # 只删除相邻的,不保留重复行 hdsui mdksjd liw $ cat ...

  9. Redis 数据类型-List

    lpush/rpush/lrange 127.0.0.1:6379> LPUSH list01 1 2 3 4 5 (integer) 5 127.0.0.1:6379> LRANGE l ...

  10. Java基础－关于session的详细解释

    转自:http://hi.baidu.com/zbzbzb/item/65d73d2a4d07cfd40f37f900 一.术语session 在我的经验里,session这个词被滥用的程度大概仅次于 ...