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 IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
JS实现可视化文件上传
Sep 08 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
vue组件入门知识全梳理
Sep 21 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
如何判断图片地址是否失效
2007/02/02 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
励志演讲稿300字
2014/08/21 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
活动宣传稿范文
2015/07/23 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android