代码实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>计算器实例效果</title>

     <script type="text/javascript">

         var compute=function (val) {

             var num1=parseFloat(document.getElementById("num1").value);

             var num2=parseFloat(document.getElementById("num2").value);

             var num3=document.getElementById("num3");

             if(val=='+') {

                 num3.value=num1+num2;

             }

             if(val=='-') {

                 num3.value=num1-num2;

             }

             if(val=='*') {

                 num3.value=num1*num2;

             }

             if(val=='/') {

                 num3.value=num1/num2;

             }

         }

     </script>

</head>

<body>

<h2>计算器</h2>

数字1:<input type="text"  id="num1"><br/>

数字2:<input type="text"  id="num2"><br/>

<input type="button"  value="+" onclick="compute(this.value)"/>

<input type="button"  value="-" onclick="compute(this.value)"/>

<input type="button"  value="*" onclick="compute(this.value)"/>

<input type="button"  value="/" onclick="compute(this.value)"/><br>

结果:<input type="text"   id="num3"/><br>

</body>

</html>

效果：

2017-09-05 00:00:33

JavaScript实例之计算器的更多相关文章

  1. JavaScript实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

  4. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 一些有用的javascript实例分析(三)

    原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...

随机推荐

  1. C语言 为什么要引入指针？

    https://blog.csdn.net/chengxuyuan997/article/details/81231679 正文 在说为什么引入指针这个问题前先带大家了解一下什么是指针? 指针最为简短 ...

  2. iOS项目自动打包

    用的是:https://www.jianshu.com/p/a61fe38c8c29 需要上传到pgy /TestFlight 在脚本中加几句就可以了 另外一种方式,fastlane打包 首要条件: ...

  3. Jenkins slave-agent.jnlp 无法安装为服务（install as a service）

    问题: 在部署持续集成环境,配置slave节点时遇到一个问题,slave-agent.jnlp可以正常启动运行(不能正常启动的点这里) 但是在保存为系统服务时,slave-agent.jnlp点击[i ...

  4. 170821-关于SpringMVC的知识点

    1.SpringMVC 概述以及优势 SpringMVC和Spring的关系:  软件开发的三层架构: web层[表示层.表现层]---->Service层---->Dao[DataBas ...

  5. 原来在UNITY中使用system.io下的所有函数都可以用相对路径 ： Assets/xx

    代码如下图,这样就不用在绝对路径和相对路径之间不断转换了. 想要得到绝对路径时就傅 Application.dataPath  + xxx using System.Collections; usin ...

  6. sqlalchemy.exc.IntegrityError: (mysql.connector.errors.IntegrityError) 1062 (23000): Duplicate entry '1' for key 'PRIMARY'

    排错: 看到 Duplicate entry '1' for key 'PRIMARY'是主键错误 看一看自己添加的数据id是1 再查询一下数据库中的表,发现id=1的记录已经存在了 所以在代码中让i ...

  7. WPF属性之理解附加属性

    附加属性,顾名思义,和被附加的控件没有依赖关系,只是强行给目标控件挂上一个“属性值”,以便于操作之.就好比,你在学校是学生,那么就要听老师的管教,在公司是下属,就要服从老板的命令一样. 我们常见的附加 ...

  8. EF框架之——Code First以及踩过的这些“坑”

    传送门 Code First使用步骤 Code First报错和解决办法 以前在上海做了一段时间的Asp.net,基本用的都是.net自带的EF框架连接数据库,不过都是用的Model First,最近 ...

  9. 06：（h5*）Vue第六天

    目录 1:iView 2:  element 3:  vuex 正文 1:i-view 1:装包 npm install view-design --save 2:导包 import ViewUI f ...

  10. rm 删除文件太多

    在工程环境下,一个文件夹包含有100多万个文件,这时用命令去删除这些文件: rm -rf * 会出现报错如下: /bin/rm: cannot execute [Argument list too l ...