用js如何实现点击加或减 其数值做相应的改变
<spanclass="add">+</span><spanclass="num1">1</span><spanclass="sub">-</span><s...
<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>点击加减符号 数字做相应的增或减 且两组互不干扰 点击上面一组的加减符号 下面一组值不会改变
展开
3个回答
展开全部
<!DOCTYPE html>
<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用来限制调节器的范围
由于时间关系就没添加了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<body>
<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请求传到后台，在后台把数据存进去
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
通过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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
