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 30 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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/08/10 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
js实现随机数小游戏
2019/06/28 Javascript
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
python一些性能分析的技巧
2020/08/30 Python
Python中生成ndarray实例讲解
2021/02/22 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
农村葬礼主持词
2014/03/31 职场文书
节能环保标语
2014/06/12 职场文书
公司合作协议范文
2014/10/01 职场文书
2014年技术员工作总结
2014/11/18 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
索尼ICF-5900W收音机测评
2022/04/24 无线电