JavaScript计算出两个数的差值


Posted in Javascript onMarch 19, 2020

本文实例为大家分享了JavaScript计算两个数差的具体代码,供大家参考,具体内容如下

需求

在两个输入框中输入两个数字,点击按钮的时候,计算出两个数字的差并且显示到id为result的div中。

实现代码

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 body{
 padding-top: 100px;
 text-align: center;
 }
 #result{
 width: 50%;
 height: 100px;
 margin: 0 auto;
 border: 1px solid #ccc;
 }
 </style>
 </head>

 <body>
 <input type="text" id="ipt1"/>
 <input type="text" id="ipt2"/>
 <button id="btn">计算</button>
 <div class="result"></div>
 <script type="text/javascript">
 // 得到input里面的值,然后拿到减,把结果放到div中
 // input.value div.innerHTML 事件绑定
 // 找对象 input button div
 var oIpt1 = document.getElementById("ipt1")
 var oIpt2 = document.getElementById("ipt2")
 var oBtn = document.getElementById("btn")
 var oBox = document.getElementById("result")
 // 事件函数绑定
 oBtn.onclick = function(){
 // 计算input里面数字的差 然后放到div中
 var num1 = oIpt1.value
 var num2 = oIpt2.value
 var result = num1-num2
 // 给div设置一个内容 result
 oBox.innerHTML = result
 }
 </script>
 </body>

</html>

上面代码实现刚开始说的需求,希望对学习前端开发的小伙伴有帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
JavaScript利用键盘码控制div移动
Mar 19 #Javascript
js实现百度登录窗口拖拽效果
Mar 19 #Javascript
js实现随机抽奖
Mar 19 #Javascript
js实现抽奖的两种方法
Mar 19 #Javascript
js实现九宫格抽奖
Mar 19 #Javascript
在Vue.js中使用TypeScript的方法
Mar 19 #Javascript
JS实现长图上下滚动效果
Mar 19 #Javascript
You might like
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
大学生村官任职感言
2014/01/09 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
企业办公室岗位职责
2014/03/12 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
个人查摆剖析材料
2014/10/04 职场文书
迎新生标语大全
2014/10/06 职场文书
放牛班的春天观后感
2015/06/01 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python