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 相关文章推荐
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python读取图片属性信息的实现方法
2016/09/11 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
物流专业求职计划书
2014/01/10 职场文书
小学数学课后反思
2014/04/23 职场文书
社区志愿者培训方案
2014/06/10 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
考研复习计划
2015/01/19 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫