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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
vue设置默认首页的操作
Aug 12 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数组交集的优化代码分析
2011/03/06 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Vue中props的详解
2019/05/16 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
《威尼斯的小艇》教学反思
2014/02/17 职场文书
运输服务质量承诺书
2014/03/27 职场文书
竞选班委演讲稿
2014/04/28 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
社区助残日活动总结
2014/08/29 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
三八妇女节慰问信
2015/02/14 职场文书
采购内勤岗位职责
2015/04/13 职场文书
车间统计员岗位职责
2015/04/14 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js