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 一个图片切换的插件
Oct 09 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
手机端转换rem适应
Apr 01 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
js同时按下两个方向键
2007/12/01 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
英文版区域经理求职信
2013/10/23 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
统计岗位职责
2014/02/21 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
求职自我评价范文
2015/03/09 职场文书
期中考试后的感想
2015/08/07 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL