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 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
JavaScript类的写法
Sep 17 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 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数组
2006/10/09 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JS交换变量的方法
2015/01/21 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python 下载及安装详细步骤
2019/11/04 Python
python3.7调试的实例方法
2020/07/21 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
销售经理工作职责范文
2013/12/03 职场文书
优秀员工表扬信
2014/01/17 职场文书
党员批评与自我批评
2014/02/12 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
房地产广告策划方案
2014/05/15 职场文书
门店业绩提升方案
2014/06/08 职场文书
2014年度思想工作总结
2014/11/27 职场文书
法制教育观后感
2015/06/17 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
Python之matplotlib绘制折线图
2022/04/13 Python