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 两个窗体之间传值实现代码
Sep 25 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP编程风格规范分享
2014/01/15 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
详解K-means算法在Python中的实现
2017/12/05 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python多任务之协程的使用详解
2019/08/26 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
答谢酒会主持词
2015/07/02 职场文书
婚宴领导致辞
2015/07/28 职场文书
欢送领导祝酒词
2015/08/12 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
python playwright 自动等待和断言详解
2021/11/27 Python