js实现网页的两个input标签内的数值加减(示例代码)


Posted in Javascript onAugust 15, 2017

实例如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){

var oIput1=document.getElementById('put1');
var oIput2=document.getElementById('put2');
var nAdd=document.getElementById('add');
var nSub=document.getElementById('subtraction');


nAdd.onclick=function(){
var a=Number(oIput1.value);
var b=Number(oIput2.value);
c = a+b;
alert(c);
}
nSub.onclick=function(){
var a=Number(oIput1.value);
var b=Number(oIput2.value);
c = a-b;
alert(c);
}
}

</script>
</head>
<body>

数值1:<input id="put1" type="text" value=""/>
数值2:<input id="put2" type="text" value=""/>
<input type="button" id="add" value="求和" />
<input type="button" id="subtraction" value="相减" />

</body>
</html>

下面是效果图 ↓

js实现网页的两个input标签内的数值加减(示例代码)

以上这篇js实现网页的两个input标签内的数值加减(示例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
JScript实现地址选择功能
Aug 15 #Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 #Javascript
JavaScript中使用Async实现异步控制
Aug 15 #Javascript
使用jQuery实现购物车结算功能
Aug 15 #jQuery
javascript兼容性(实例讲解)
Aug 15 #Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 #Javascript
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php实现的RSS生成类实例
2015/04/23 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
类之Prototype.js学习
2007/06/13 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python实现各种插值法(数值分析)
2019/07/30 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
思想汇报格式
2014/01/05 职场文书
个人实习生的自我评价
2014/02/16 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
植树节活动总结
2014/04/30 职场文书
春节超市活动方案
2014/08/14 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers