javascript - 点击增加span 的数字加1，点击减少span减1如何做？

Question

<button id="aa">增加<button>
<span id="cc"></span>
<button id="bb">减少<button>

span的初始值为00,当增加到30是恢复初始值， 当减少到00在减少变成30

Answer 1

想了想还是不要直接绑定事件了，这样的写法一点营养都没有。

HTML

<p id="example">
    <button>增加</button>
    <span></span>
    <button>减少</button>
</p>
<p id="example1">
    <button>增加</button>
    <span></span>
    <button>减少</button>
</p>
<p id="example2">
    <button>增加</button>
    <span></span>
    <button>减少</button>
</p>

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();

Answer 2

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);
});

Answer 3

    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);
            }
        });

Answer 4

答案很全了啊，我就补个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 <p>{temp}</p>;
    }
});

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 (
            <p>
                <button id="aa" onClick={this.increaseHandler}>增加</button>
                <SpanBox count={this.state.count}/>
                <button id="bb" onClick={this.reduceHandler}>减少</button>
            </p>
        )
    }
})
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转一下再用