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代码
Oct 09 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
使用angular写一个hello world
Jan 23 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 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 在文件指定行插入数据的代码
2010/05/08 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
JavaScript的Function详细
2006/11/14 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
Python常用随机数与随机字符串方法实例
2015/04/09 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
学年末自我鉴定
2014/01/21 职场文书
本科毕业生自荐信
2014/05/26 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
担保书格式范文
2015/09/22 职场文书