用js如何实现点击加或减 其数值做相应的改变
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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 <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请求传到后台，在后台把数据存进去
追问能否给个简单的案例呢
追答~~这个前台后台代码都有，这上面不好写。ajax请求你会不，你用ajax把数据传递到后台去，然后后台通过request的getSession方法取得session，然后再用session的setAttribute方法就可以存session进去了，取session就是对应的get方法，都k、v形式的
本回答被提问者采纳 参考技术B通过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>
nodejs操作时间，例如加或减时间
var moment = require('moment');
console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间 （24小时制）
//添加时间
console.log(moment().add(1, "hours").format("YYYY-MM-DD HH:mm:ss")); //当前时间增加1小时
console.log(moment().add(1, "months").format("YYYY-MM-DD HH:mm:ss")); //当前时间增加1个月
//减少时间
console.log(moment().subtract(10, "days").format("YYYY-MM-DD HH:mm:ss")); //当前时间的前10天时间
console.log(moment().subtract(1, "years").format("YYYY-MM-DD HH:mm:ss")); //当前时间的前1年时间
console.log(moment().subtract(3, "months").format("YYYY-MM-DD HH:mm:ss")); //当前时间的前3个月时间
console.log(moment().subtract(1, "weeks").format("YYYY-MM-DD HH:mm:ss")); //当前时间的前一个星期时间| 格式代码 | 说明 | 返回值例子 |
| M | 数字表示的月份，没有前导零 | 1到12 |
| MM | 数字表示的月份，有前导零 | 01到12 |
| MMM | 三个字母缩写表示的月份 | Jan到Dec |
| MMMM | 月份，完整的文本格式 | January到December |
| Q | 季度 | 1到4 |
| D | 月份中的第几天，没有前导零 | 1到31 |
| DD | 月份中的第几天，有前导零 | 01到31 |
| d | 星期中的第几天，数字表示 | 0到6，0表示周日，6表示周六 |
| ddd | 三个字母表示星期中的第几天 | Sun到Sat |
| dddd | 星期几，完整的星期文本 | 从Sunday到Saturday |
| w | 年份中的第几周 | 如42：表示第42周 |
| YYYY | 四位数字完整表示的年份 | 如：2014 或 2000 |
| YY | 两位数字表示的年份 | 如：14 或 98 |
| A | 大写的AM PM | AM PM |
| a | 小写的am pm | am pm |
| HH | 小时，24小时制，有前导零 | 00到23 |
| H | 小时，24小时制，无前导零 | 0到23 |
| hh | 小时，12小时制，有前导零 | 00到12 |
| h | 小时，12小时制，无前导零 | 0到12 |
| m | 没有前导零的分钟数 | 0到59 |
| mm | 有前导零的分钟数 | 00到59 |
| s | 没有前导零的秒数 | 1到59 |
| ss | 有前导零的描述 | 01到59 |
| X | Unix时间戳 | 1411572969 |
以上是关于用js如何实现点击加或减 其数值做相应的改变的主要内容，如果未能解决你的问题，请参考以下文章