<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用来限制调节器的范围
由于时间关系就没添加了
自己拼一个吧，点击“+”号的时候，append一组数据，记得要有不一样的id；点击“-”号的时候需要判断当前宝贝数量是否为1，如果是1，不让减，如果不是，那么移除一组，根据id移除。
一直知道js的浮点数计算是不精确的， 0.1 + 0.2 !== 0.3，但是也就知道而已，解决方法却不怎么注意，所以刚做一个项目，尽管了解浮点数精度不精确的问题，但是还是掉坑里了。在此再次默默告诉自己要警惕，端正心态，不可掉以轻心！！！所以下面就分享一些加减乘除的方法。
原理： 把数字转换成字符串，然后从小数点部分切割成两部分，分别算出两个因数的小数点右边的长度，然后用两个因数的小数点右边长度最大的数再乘以10，相当于两个都放大了n倍，然后相加，然后缩小n倍。
注意，这里的放大用了乘法times函数（下面介绍），因为浮点数直接乘以100有可能出现精度不够的情况，如下图
原理和加法一样，放大n倍后相减再缩小n倍
乘法原理稍微变点，放大倍数n是 ‘两个小数点后面长度之和’ 而不是 ‘两个小数点后面长度这两者之间的最大值’
除法原理和乘法一样
这也是一个坑，比如你要保留两位小数，四舍五入的话就要看小数点第三位后面的数字来决定，如2.445四舍五入后就是2.45； 2.444四舍五入就是2.44；做这个需求的时候，我第一反应是Math.toFixed(2)，结果是bug百出啊，这里就不举例了，有兴趣可以自己尝试。然后我是怎么解决的呢？百度了一下，也是得到一些半成品不严谨的函数，原理也很简单，先放大倍数，然后利用Math.round()取整
以上加减乘除方法基本满足一般业务需求了，尤其是电商。但是如果数字计算时超出了 2的1024次方减1 ，也就是 9007199254740992 这个数字的话就不适合了，因为从 2^1024 开始就变成了 Infinity。
