js实现网页的两个input标签内的数值加减

<!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>

下面是效果图 ↓

时间: 2024-11-03 03:36:44

js实现网页的两个input标签内的数值加减的相关文章

如何让input number类型的标签不产生上下加减的按钮

之前用 input type="number" 来放数字框,发现有个上下加减的东西,感觉不太好 这个容易出现0 然后减为负数 这种情况下怎么去掉右边的那个上下加减的小按钮呢?前端同事告诉我加一点css就行了 <style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } </sty

js jquery 权限单选 bug修改以及正确代码 购物车数量加减

效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javascript:;" class="minus" onclick="delpubls(this)">-</a> <input type="number" style="min-height: 20px;font

如何获取两个任意时间段内的所有日期(及其他处理日期时间的方法总结)

(1)用一下方法获取两个任意时间段内的所有日期,代码如下: #1.将字符串转换成datetime类型 def strtodatetime(datestr,format): return datetime.datetime.strptime(datestr,format) #2.时间转换成字符串,格式为2008-08-02 def datetostr(date): return str(date)[0:10] #3.两个日期相隔多少天,例:2008-10-03和2008-10-01是相隔两天 de

控制input标签中只能输入数字以及小数点后两位

js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { obj.value = ""; } if (obj != null) { //检查小数点后是否对于两位http://blog.csdn.net/shanzhizi if (obj.value.toString().split(".").length > 1 &a

【整合】input标签JS改变Value事件处理方法

某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改值,修改后触发事件.重点阻塞在于此(JS赋值要触发) 最终采用方案: 1.IE(IE8及以下)下使用onpropertychange实现JS赋值后触发事件 2.需求是手工输入结束后才触发事件,避免在文本框实时输入文字的时候也因为onpropertychange触发事件,在trriger之前判断当前焦

js 控制 input标签的 readonly属性

input 标签的 readonly 属性   $('#id').attr("readonly","readonly")//将input元素设置为readonly   $('#id').removeAttr("readonly");//去除input元素的readonly属性     if($('#id').attr("readonly")==true)//判断input元素是否已经设置了readonly属性 本人喜欢如下方法

HTML简单登录和注册页面及input标签诠释

今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标记语言.HTML 标签是由尖括号包围的关键词,比如 <html>.HTML 标签通常是成对出现的,比如 <b> 和 </b>: <html> 与 </html> 之间的文本描述网页: <body> 与 </body> 之间的文

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

html之input标签和form标签

input标签 input标签是自己闭合的 <input /> input系列有checkbox.redio.password.button.file等 1.type='text' 和type='password' <input type='text' /> type='text' 和type='password' 用户名:<input type="text"/> <br/><br/> 密  码:<input type=