计算器介绍：只能进行加减乘除，提示用户输入数字，正则表达式限制用户只能输入数字（在用户输入时限制），如果出现除零操作答案为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. Spring + Spring MVC+Hibernate框架整合详细配置

    来源于:http://www.jianshu.com/p/8e2f92d0838c 具体配置参数: Spring: spring-framework-4.2.2Hibernate: hibernate ...

  2. 各种图（流程图，思维导图，UML，拓扑图，ER图）简介

    来源于:http://www.cnblogs.com/jiqing9006/p/3344221.html 流程图 1.定义:流程图是对过程.算法.流程的一种图像表示,在技术设计.交流及商业简报等领域有 ...

  3. freemarker 分页取值

    <#if pagination??&&pagination.list??> <#list pagination.list as video> <td al ...

  4. fio 2种画图方法 fio_generate_plots 和 gfio

    fio 安装fio apt-get install fio 可以把fio的输出数据自动画图的插件gnuplot apt-get install gnuplot 1.输出bw,lat和iops数据并画图 ...

  5. OAuth in One Picture

    近年来,OAuth在各种开放平台的引领下变得非常流行,上图是OAuth协议认证的全过程,图本身已经比较详细,这里不再赘述. 从上图中可以看出,OAuth协议中有三个角色: User, Consumer ...

  6. Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

    首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是  --阿里巴巴矢量图标库 -网 ...

  7. iOS开发--换肤简单实现以及工具类的抽取

    一.根据美工提供的图片,可以有两种换肤的方案. <1>美工提供图片的类型一: <2>美工提供图片的类型二:这种分了文件夹文件名都一样的情况,拖入项目后最后用真实文件夹(蓝色文件 ...

  8. 第一天的作业，登录接口脚本 login.py

    user_list = [] count = 0 user = "liruixin" password = " raw_user = raw_input("us ...

  9. WPF 资源字典【转】

    使用好处:存储需要被本地话的内容(错误消息字符串等,实现软编码),减少重复的代码,重用样式,实现多个项目之间的共享资源;修改一个地方所有引用的地方都会被修改,方便统一风格;使用方法,归纳起来主要有下面 ...

  10. Oracle MERGE INTO 语句

    MERGE INTO USER_TEST T1 USING (SELECT '1001' AS ID,'王睿' AS NAME FROM dual) T2 ON ( T1.ID=T2.ID) WHEN ...