<button id="aa">增加<button>
<span id="cc"></span>
<button id="bb">减少<button>
span的初始值为00,当增加到30是恢复初始值, 当减少到00在减少变成30
var change = function(num){
var span = document.getElementById('cc'),
spanNum = span.innerText*1;
spanNum += num;
if(spanNum > 30){
spanNum = 0;
}
if(spanNum < 0) {
spanNum = 30;
}
if(spanNum<10){
span.innerText = '0'+spanNum;
} else {
span.innerText = ''+spanNum;
}
}
document.getElementById('aa').addEventListener('click', function(e) {
change(1);
});
document.getElementById('bb').addEventListener('click', function(e) {
change(-1);
});
想了想还是不要直接绑定事件了,这样的写法一点营养都没有。
HTML
<div id="example">
<button>增加</button>
<span></span>
<button>减少</button>
</div>
<div id="example1">
<button>增加</button>
<span></span>
<button>减少</button>
</div>
<div id="example2">
<button>增加</button>
<span></span>
<button>减少</button>
</div>
script
function Component(el, options) {
this.opts = $.extend({
initVal: 0,
maxVal: 30
}, options);
this.$el = el;
this._currVal = this.opts.initVal;
this.$add = this.$el.find('button:first');
this.$sub = this.$el.find('button:last');
this.$show = this.$el.find('span');
this.render(this._currVal);
this.$add.on('click', $.proxy(this.handleAdd, this));
this.$sub.on('click', $.proxy(this.handleSub, this));
}
$.extend(Component.prototype, {
handleAdd: function () {
this.render(this._currVal + 1);
},
handleSub: function () {
this.render(this._currVal - 1);
},
render: function (val) {
if (val <= this.opts.initVal) {
this._currVal = this.opts.initVal;
} else if (val >= this.opts.maxVal) {
this._currVal = this.opts.maxVal;
} else {
this._currVal = val;
}
this.$show.text(this._currVal);
},
getCurrVal: function () {
return this._currVal;
}
});
new Component($('#example'));
new Component($('#example1'), {
initVal: 5,
maxVal: 20
});
var component = new Component($('#example2'), {
initVal: 10,
maxVal: 30
});
component.getCurrVal();
var num=0;
$("#cc").text("00");
$("#aa").on("click",function(){
num++;
if(num<=9){
$("#cc").text("0"+num);
}else{
$("#cc").text(num);
}
if(num>30){
num=0;
$("#cc").text("0"+num);
}
});
$("#bb").on("click",function(){
num--;
if(num<=9){
$("#cc").text("0"+num);
}else{
$("#cc").text(num);
}
if(num<0){
num=30;
$("#cc").text(num);
}
});
答案很全了啊,我就补个react的吧
//index.js
var SpanBox = React.createClass({
getDefaultProps: function () {
return {
count: 0
}
},
render: function () {
var temp = this.props.count;
if (temp < 10 && temp >= 0)
temp = '0' + temp
else if (temp < 0 && temp > -10)
temp = '-0' + Math.abs(temp);
return <div>{temp}</div>;
}
});
var MainBox = React.createClass({
increaseHandler: function () {
if (++this.state.count > 30)
this.setState({
count: 0
})
else
this.setState({
count: this.state.count
})
},
reduceHandler: function () {
if (--this.state.count < 0)
this.setState({
count: 30
})
else
this.setState({
count: this.state.count
})
},
getInitialState: function () {
return {
count: 0
}
},
render: function () {
return (
<div>
<button id="aa" onClick={this.increaseHandler}>增加</button>
<SpanBox count={this.state.count}/>
<button id="bb" onClick={this.reduceHandler}>减少</button>
</div>
)
}
})
React.render(<MainBox/>, document.body);
//html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/react.js"></script>
<title></title>
</head>
<body>
<script src="../build/index.js"></script>
</body>
</html>
//index.js用babel转一下再用