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跨域访问示例(客户端/服务端)
May 19 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
Node.js简单入门前传
Aug 21 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 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 柱状图实现代码
2009/12/04 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php银联网页支付实现方法
2015/03/04 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
python检查指定文件是否存在的方法
2015/07/06 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python对文件操作知识汇总
2016/05/15 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python爬虫基本知识
2018/03/05 Python
python监控进程脚本
2018/04/12 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
详解python 中in 的 用法
2019/12/12 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
医院合作协议书
2014/08/19 职场文书
团代会闭幕词
2015/01/28 职场文书
工作经历证明范本
2015/06/15 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
讲解Python实例练习逆序输出字符串
2022/05/06 Python