用js如何实现点击加或减 其数值做相应的改变
<span class="add">+</span> <span class="num1">1</span> <span class="sub">-</span><span class="jia">+</span> <span class="num2">2</span> <span class="jian">-</span>点击加减符号 数字做相应的增或减 且两组互不干扰 点击上面一组的加减符号 下面一组值不会改变
<html>
<head>
<title>用js如何实现点击加或减 其数值做相应的改变</title>
<meta charset="UTF-8" />
<script>
//调节器类
function Regulator(father){
this.init = function(){
this.father = father ? father : document.body;
this.box = document.createElement('span');
this.sub = document.createElement('span');
this.num = document.createElement('span');
this.add = document.createElement('span');
this.box.className = 'regulator';
this.sub.className = 'regulator-sub';
this.num.className = 'regulator-num';
this.add.className = 'regulator-add';
this.sub.innerHTML = '-';
this.num.innerHTML = '0';
this.add.innerHTML = '+';
this.box.appendChild(this.sub);
this.box.appendChild(this.num);
this.box.appendChild(this.add);
this.num.value = 0; //设置初始数值
this.sub.onclick = (function(o){
return function(){
o.num.innerHTML = --o.num.value;
}
})(this);
this.add.onclick = (function(o){
return function(){
o.num.innerHTML = ++o.num.value;
}
})(this);
this.father.appendChild(this.box);
}
this.init();
}
window.onload = function(){
var father = document.getElementById('main'),
regulator1 = new Regulator(father);
regulator2 = new Regulator(father);
regulator3 = new Regulator(father);
regulator4 = new Regulator(father);
regulator5 = new Regulator(father);
regulator6 = new Regulator(father);
regulator7 = new Regulator(father);
regulator8 = new Regulator(father);
regulator9 = new Regulator(father);
}
</script>
<style>
.regulator,
.regulator-sub,
.regulator-num,
.regulator-add { display: inline-block; }
.regulator { margin: 0px 5px; padding: 3px 0px; height: 30px; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; box-shadow: 1px 2px 5px #ccc; box-sizing: border-box; }
.regulator-sub,
.regulator-num,
.regulator-add { padding: 0px 10px; line-height: 22px; }
.regulator-num { border-width: 0px 1px; border-style: solid; border-color: #ccc; }
.regulator-sub,
.regulator-add { cursor: default; user-select: none; }
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
编写一个Regulator类
每次new一个Regulator就可以了，省下很多重复的代码
使用方法
var test = new Regulator(document.body)
只有一个参数，就是父元素
代码还有可以改进的地方
1.初始化 有重复可以封装成一个函数减少冗余
2.还可以添加两个对象方法，setNum和getNum，用来设置数值和获取数值
3.添加两个参数max，min用来限制调节器的范围
由于时间关系就没添加了
<a href="javascript:;" id=demo onclick="setAmount('add1')"><span class="add" >+</span></a>
<span class="num1" id="num1" name="num1">1</span>
<a href="javascript:;" id=demo onclick="setAmount('reduce1')"><span class="sub" onclick="setAmount('reduce')">-</span></a>
<br/><br/>
<a href="javascript:;" id=demo onclick="setAmount('add2')"><span class="jia" >+</span></a>
<span class="num2" id="num2" name="num2">2</span>
<a href="javascript:;" id=demo onclick="setAmount('reduce2')"><span class="jian">-</span></a>
<!-- 点击加减符号 数字做相应的增或减 且两组互不干扰 点击上面一组的加减符号 下面一组值不会改变
-->
<script type="text/javascript">
function setAmount(i) {
var num1 = document.getElementById("num1").innerText;
var num2 = document.getElementById("num2").innerText;
var s1=parseInt(num1,10);
var s2=parseInt(num2,10);
if(i == "add1") {
s1++;
document.getElementById("num1").innerHTML = s1;
}
else if(i == "reduce1") {
s1--;
document.getElementById("num1").innerHTML = s1;
}
else if(i == "add2") {
s2++;
document.getElementById("num2").innerHTML = s2;
}
else if(i == "reduce2") {
s2--;
document.getElementById("num2").innerHTML = s2;
}
}
</script>
</body>
我把HTML文件的头和尾部去掉了，只剩下了中间的body部分，然后HTML代码和js都写在里面的，js导的包你应该自己知道哈，然后为了实现点击功能，我在span便签外面加了a标签。上述的js代码可以实现两组数值加减各不干扰，不懂得还可以问我
其实，为了简化代码，可以把部分html代码合并一下，但是为了尽量保留你代码的完整性，所以我没有修改
追问您好 在吗 请问 我现在要把这个增加后的数值num1 num2存入session中 应该如何处理呢
追答你好，js是没办法直接存到session中的，你可以把新的值通过ajax请求传到后台，在后台把数据存进去
追问能否给个简单的案例呢
追答~~这个前台后台代码都有，这上面不好写。ajax请求你会不，你用ajax把数据传递到后台去，然后后台通过request的getSession方法取得session，然后再用session的setAttribute方法就可以存session进去了，取session就是对应的get方法，都k、v形式的
本回答被提问者采纳通过this的父节点 兄弟节点等方式操作 如果对class进行操作就会同时变化
<span class="add">+</span> <span class="num1">1</span> <span class="sub">-</span><br><span class="add">+</span> <span class="num2">2</span> <span class="sub">-</span>
<script>
var add=document.getElementsByClassName('add');
var sub=document.getElementsByClassName('sub');
for(var i=0;i<add.length;i++){
add[i].onclick=function(){
this.nextElementSibling.innerHTML++;
}
sub[i].onclick=function(){
this.previousElementSibling.innerHTML--;
}
}
</script>
用js如何实现点击加或减 其数值做相应的改变
DOCTYPE html>用js如何实现点击加或减 其数值做相应的改变\/\/调节器类function Regulator(father){this.init = function(){this.father = father ? father : document.body;this.box = document.createElement('span');this.sub = document.createElement('span');this.num = document.createElement('s...
JavaScript怎么实现点击按钮,使文本框里的数值加或者减
先给+-按钮添加上onclick事件 然后js获取文本数值 把文本字符串转换成int，然后+1或-1 把int转换成文本(好像也可以不转换)设置文本框的value就行了 === 思路给你 代码我懒得写了
...文本框都可以控制点击加数值加1,点击减数值可以减1,js怎么实现...
\/\/调用 加1 onclick=test("要控制的文本框的id",1);\/\/调用 减1 onclick=test("要控制的文本框的id",-1);
怎么用JS来实现一个日期型数值加上月份数得到另外一个日期型数值呢
回答：var day = document.getElementById("YQYS").value;var dateTemp ="${requestScope.JBSJ}";dateTemp = dateTemp.split("-"); \/\/转换为MM-DD-YYYY格式 var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]); \/\/ Month 是你相加的月份个数var newDa...
前端js编程中的元素怎么实现累加效果?
定义计数器变量count。JavaScript代码：在JavaScript代码里，给按钮绑定点击事件处理函数。函数内，计数器变量加一，然后将数值显示元素的内容更新为计数器变量的值。通过此方法，每次点击按钮，数值会自动递增并即时显示在页面上。此操作简洁高效，适用于实现多种累加效果的前端JavaScript编程中。
html动态点击按钮加1减1如何实现
1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入html代码：5 + - 再输入js代码：function fun(a) { ('span').text(parseInt($('span').text()) + a);} 3、浏览器运行index.html页面，此时点击加号按钮会增加span文本的数值，点击减号按钮会减少s...
JS 点击id为itemProcessor后数值加100 但是重复点击它还加100
；o=100;已经把var o=document.getElementById("itemProcessor").value值覆盖率，如果要每次点击都累加100，应该把0=100,改为o+=100;相当于o=o+100;另外怎么点击 id="itemProcessorMinus"后减去100 这就是两个不同函数域里 如果要同时操作一个数 你得把这个数设置成全局变量，就可以了 ...
刚接处JS,为什么加法的时候数值加字符串会变成字符串类型呢,而减法时数...
因为 + 在 JavaScript 中是个特殊的字符，即可以当做相加的运算符号，还可以当做连字符。所以当一个数值和一个字符串相加的时候会被当做连字符使用。var three = "3"; \/\/ 2alert(5 - three); \/\/ 53alert(5 + three); \/\/ 8alert(5 + parseInt(three));
js 如何实现加法?
js中加法运算有：1、输入的是字符串, 字符串的连接符也是加号, 最后就按字符串运算了，所以先转换成数值型。整数：c=parseInt(a)+parseInt(b)浮点数：c =parseFloat(a)+parseFloat(b)2、evel：可计算某个字符串，并执行其中的的 JavaScript 代码。evel(a+b)例如：var a = 1,var b = 2,var...
怎样写一个js事件实现导入模型按输入数值旋转
示例一：Click Me 示例二： demo \/\/ 在onload 事件中添加所有标签的事件 window.onload = function(){ \/\/ 找到对象
