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 URL锚点取值方法
Feb 25 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
微信小程序实现购物车功能
Nov 18 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获取服务器信息的实现代码
2013/02/04 PHP
如何判断php数组的维度
2013/06/10 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue 实现特定条件下绑定事件
2019/11/09 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
酒店员工检讨书
2014/02/18 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
搞笑征婚广告词
2014/03/17 职场文书
中职生自荐信范文
2014/06/15 职场文书
2016年教师节感言
2015/12/09 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL