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代码
Mar 06 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
header()函数使用说明
2006/11/23 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
js实现五星评价功能
2017/03/08 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
一套C#面试题
2013/10/09 面试题
管理站站长岗位职责
2013/11/27 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
作风整顿剖析材料
2014/09/30 职场文书
《包身工》教学反思
2016/02/23 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android