计算器介绍：只能进行加减乘除，提示用户输入数字，正则表达式限制用户只能输入数字（在用户输入时限制），如果出现除零操作答案为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. 【NOIP 2015 & SDOI 2016 Round1 & CTSC 2016 & SDOI2016 Round2】游记

    我第一次写游记,,,, 正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪 ...

  2. javascript 工具函数

    转义特殊字符为html实体 HtmlEncode: function(str){ return str.replace(/&/g, '&').replace(/\"/g, ' ...

  3. mysql-函数CASE WHEN 语句使用说明

    mysql数据库中CASE WHEN语句. case when语句,用于计算条件列表并返回多个可能结果表达式之一. CASE 具有两种格式: 简单 CASE 函数将某个表达式与一组简单表达式进行比较以 ...

  4. 华硕笔记本BIOS设置详解

    BIOS是英文Basic Input/Output System的缩写,即基本输入输出系统,合理的BIOS设置可以让我们的电脑更好的为我们服务,但由于大部分笔记本的BIOS界面是英文,并且BIOS里面 ...

  5. 为什么OGNL表达式功能强大？

    1.OGNL能支持java运算符: 2.OGNL能从java对象中取值: 3.OGNL能调用java对象的方法:

  6. this action could not be completed.try again登陆appstore错误提示

    今天升级10.11后登陆appstore的时候发现报错了: this action could not be completed.try again 解决办法,终端敲入: sudo mkdir -p ...

  7. JavaScript RegExp 对象(来自w3school)

    RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的 ...

  8. Python中的GIL

    •start 线程准备就绪,等待CPU调度 •setName 为线程设置名称 •getName 获取线程名称 •setDaemon 设置为后台线程或前台线程(默认) 如果是后台线程,主线程执行过程中, ...

  9. 绘制图形与3D增强技巧(五)----多边形图元的使用及其他

    1.注意多边形图元中的多边形只能是平面的,而且必须为凸多边形,且多边形的边不能弯曲 2.细分和边界,可以人为设置边界边和非边界边 glEdgeFlag(true)//接下来所有点均为边界边起点 glE ...

  10. Java多线程与并发库高级应用-同步集合

    ArrayBlockingQueue LinkedBlockingQueue 数组是连续的一片内存 链表是不连续的一片内存  传统方式下用Collections工具类提供的synchronizedCo ...