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 相关文章推荐
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
必备的JS调试技巧汇总
2016/07/20 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python中遍历文件的3个方法
2014/09/02 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python六大开源框架对比
2015/10/19 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
美国网上书店:Barnes & Noble
2018/08/15 全球购物
三分钟演讲稿范文
2014/04/24 职场文书
植树节活动总结
2014/04/30 职场文书
校本教研活动总结
2014/07/01 职场文书
高中生旷课检讨书
2014/10/08 职场文书
会计电算化实训报告
2014/11/04 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
Go语言基础知识点介绍
2021/07/04 Golang