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 简单抽屉效果的实现代码
Mar 09 Javascript
Cookie 小记
Apr 01 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
React Router基础使用
Jan 17 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
短波的认识
2021/03/01 无线电
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
discuz目录文件资料汇总
2014/12/30 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python json模块使用实例
2015/04/11 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python 导入文件过程图解
2019/10/15 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
人事专员工作职责
2014/02/22 职场文书
我爱读书演讲稿
2014/05/07 职场文书
电影开国大典观后感
2015/06/04 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python