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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
Express的路由详解
Dec 10 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 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
用PHP函数解决SQL injection
2006/12/09 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
HTML的select控件美化
2017/03/27 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
微信小程序使用Promise简化回调
2018/02/06 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python中实现常量(Const)功能
2015/01/28 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Django的models中on_delete参数详解
2019/07/16 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python定义类self用法实例解析
2020/01/22 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
婚庆公司的创业计划书
2014/01/22 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技