代码实例：

<!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. win7连接无线网出现黄色感叹号怎么办？

    用win7连接无线网,出现黄色感叹号: 1.IP冲突,“网络中心”-“无线网属性”,手动改下IP,子网掩码,网关,DNS 2.360断网急救箱修复问题

  2. Favorite Donut

    Favorite Donut Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  3. Fiddler正则匹配调试接口示例

    Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 代理就是在 ...

  4. Flask学习 4 http方法

    服务端端 #!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: f ...

  5. Mongodb日常管理

    用户管理: MongoDB Enterprise > db.version()3.4.10 1.创建超级管理员:MongoDB Enterprise > use admin MongoDB ...

  6. Cadence 学习

    记录学习Cadence的资料 Cadence 16.6软件             链接: http://pan.baidu.com/s/1mgwSeYs 密码: jemk 于博士视频教程(15.7版 ...

  7. C# DataTable删除行Delete与Remove的问题

    DataTable删除行使用Delete后,只是该行被标记为deleted,但是还存在,用Rows.Count来获取行数时,还是删除之前的行数,需要使用datatable.AcceptChanges( ...

  8. 爬虫（十一）—— 请求库（三）pypeteer请求库

    曾经使用模拟浏览器操作(selenium + webdriver)来写爬虫,但是稍微有点反爬的网站都会对selenium和webdriver进行识别,网站只需要在前端js添加一下判断脚本,很容易就可以 ...

  9. Join的7中情况

    一.左外连接 SELECT * FROM A LEFT JOIN B ON A.KEY = B.KEY 二.右外连接 SELECT * FROM A RIGHT JOIN B ON A.KEY = B ...

  10. Vue的入门之安装

    vue.js是前端框架中比较热门的,因为工作关系,也加入了浩浩荡荡的学习大潮中,用笔记记录下点滴,便于后面学习查阅! 1 node.js环境的安装包(npm包管理器) 2 vue-cli 脚手架构建工 ...