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闭包的高级使用方法实例
Jul 04 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
vue mvvm数据响应实现
Nov 11 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 判断变量类型实现代码
2009/10/23 PHP
php数组一对一替换实现代码
2012/08/31 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
javascript的内存管理详解
2013/08/07 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python字典改变value值方法总结
2019/06/21 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
实习生矿工检讨书
2014/10/13 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
高考1977观后感
2015/06/04 职场文书
微信早安问候语
2015/11/10 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书