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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
vue实现单选和多选功能
Aug 11 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python深入学习之上下文管理器
2014/08/31 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
自考生自我鉴定范文
2013/10/01 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
环卫工人节活动总结
2014/08/29 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
刘胡兰观后感
2015/06/16 职场文书
退休欢送会主持词
2015/07/01 职场文书