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的让textarea自适应高度的插件
Aug 03 Javascript
jquery 使用点滴函数代码
May 20 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
jquery offset函数应用实例
Nov 14 Javascript
javascript自定义的addClass()方法
May 28 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
js实现div在页面拖动效果
May 04 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
js实现微信聊天效果
2020/08/09 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
原生js实现弹幕效果
2020/11/29 Javascript
python文件和目录操作函数小结
2014/07/11 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
安全生产月演讲稿
2014/05/09 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
护士节活动总结
2014/08/29 职场文书
委托证明书
2014/09/17 职场文书
家庭困难证明
2014/10/12 职场文书
小学班主任评语
2014/12/29 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL