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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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把字符串指定字符分割成数组的方法
2018/03/12 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python解析json实例方法
2013/11/19 Python
python中requests小技巧
2017/05/10 Python
python爬取个性签名的方法
2018/06/17 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
佳能德国网上商店:Canon德国
2017/03/18 全球购物
股东协议书范本
2014/04/14 职场文书
党员三严三实心得体会
2014/10/13 职场文书
工作失职检讨书500字
2014/10/17 职场文书
事业单位年度考核评语
2014/12/31 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android