代码实例：

<!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. 如何从word中复制内容到网站后台编辑器中

    word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转 ...

  2. C++ 得到系统时间

    Time::Time() {//得到系统时间 初始化 time_t t; t=time(NULL); tm *lt; lt=localtime(&t); hour=lt->tm_hour ...

  3. 20180805-Java ByteArrayInputStream类

    ByteArrayInputStream bArray = new ByteArrayInputStream(byte [] a); ByteArrayInputStream bArray = new ...

  4. Nginx负载均衡与反向代理—《亿级流量网站架构核心技术》

    当我们的应用单实例不能支撑用户请求时,此时就需要扩容,从一台服务器扩容到两台.几十台.几百台.然而,用户访问时是通过如http://www.XX.com的方式访问,在请求时,浏览器首先会查询DNS服务 ...

  5. 攻防世界 | string

    #encoding=utf-8 #!usr/bin/python from pwn import * io = remote('111.198.29.45',42643) io.recvuntil(& ...

  6. 获取响应状态Status信息、获取状态码Status Code

    一般服务器的响应状态有以下几种: 200 正常 400 未找到页面 403 拒绝 500 服务器错误 比如我们请求bootstrap中文网, 此时的状态码是200 OK表示正常,后面的from cac ...

  7. ruby中=>是什么意思

    如果是对数组赋值,下标 => 值例如 a = {1 => "1",2 => "22"}a[1] "1"a[2] " ...

  8. day11—前端学习之我不想看书

    转行学开发,代码100天——2018-03-27 今天是前端学习,博客记录见证的第11天,按理说还要继续写一写代码相关的内容. 但由于今天的代码实践都是一些基础知识,还是想谈一谈关于编程方面看书的事情 ...

  9. day03—JavaScript中DOM的Event事件方法

    转行学开发,代码100天——2018-03-19 1.Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用, ...

  10. spring4.1.8扩展实战之五：改变bean的定义(BeanFactoryPostProcessor接口)

    本章我们继续实战spring的扩展能力,通过自定义BeanFactoryPostProcessor接口的实现类,来对bean实例做一些控制: 原文地址:https://blog.csdn.net/bo ...