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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
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
php5 and xml示例
2006/11/22 PHP
php中的数组操作函数整理
2008/08/18 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
python实现日常记账本小程序
2018/03/10 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
中科创达面试题
2016/12/28 面试题
房地产销售经理岗位职责
2014/01/01 职场文书
大学生村官典型材料
2014/01/12 职场文书
社区护士演讲稿
2014/08/27 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
退休欢送会主持词
2015/07/01 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang