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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
js中url对象化管理分析
Dec 29 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
php array_search() 函数使用
2010/04/13 PHP
php中explode与split的区别介绍
2012/10/03 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php创建图像具体步骤
2017/03/13 PHP
Javascript注入技巧
2007/06/22 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python制作Windows系统服务
2017/03/25 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
冬季安全检查方案
2014/05/23 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技