计算器介绍：只能进行加减乘除，提示用户输入数字，正则表达式限制用户只能输入数字（在用户输入时限制），如果出现除零操作答案为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. nginx的安装

    1,,nginx的安装 为什么使用nginx我就不多说了,很优秀的,请再行google 在安装前,先安装pcre,安装zlib,安装openssl,以及一些其他包 yum install -y gcc ...

  2. Oracle 同时删除多张表

    今天想要将Oracle数据库中 有规律命令的表删除掉,好想一次性干掉--不过没成功--所以退而求其次 先查询想要干掉的表,并且拼接成sql 语句 select 'drop table ' ||tabl ...

  3. css-画三角箭头

    .arrow { width:; height:; content: ""; border: solid 10px #7c7; display: block; border-top ...

  4. linux-查看系统是32位还是64位

    可以用命令“getconf LONG_BIT”查看, 如果返回的结果是32则说明是32位,返回的结果是64则说明是64位. 此外还可以使用命令“uname -a”查看, 输出的结果中,如果有x86_6 ...

  5. jquery检测浏览器版本

    //检测当前浏览器 function browserType() { var brow = $.browser; //console.log(brow); var bInfo = "&quo ...

  6. HTML基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  7. 在Filter 无法跳转地址

    private DataDbContext db = new DataDbContext(); /// <summary> /// 控制器执行前判断 /// </summary> ...

  8. 【BZOJ-4423】Bytehattan 并查集 + 平面图转对偶图

    4423: [AMPPZ2013]Bytehattan Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 144  Solved: 103[Submit][ ...

  9. linux中nc详解

    |是管道符号,表示左边的输出作为右边的输入. 1.TCP端口扫描 # nc -v -z -w2 127.0.0.1 1-100 Connection to 127.0.0.1 22 port [tcp ...

  10. UOJ149 【NOIP2015】子串

    本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转载请注明出处,侵权必究,保留最终解释权! [问题描述]有两个仅包含小写英文字母的字符串 A ...