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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
Javascript设计模式之原型模式详细
Oct 05 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/11/23 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
Javascript面向对象编程
2012/03/18 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python的继承知识点总结
2018/12/10 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python实现图片上添加图片
2019/11/26 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
给校长的建议书500字
2014/05/15 职场文书
教师考察材料范文
2014/06/03 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
结婚仪式主持词
2015/06/29 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript