JS數量輸入控制項

  很早看到kissy首頁 有數量輸入控制項，就隨便看了下功能 感覺也不怎麼難 所以也就試著自己也做了一個， 當然基本的功能和他們的一樣，只是用了自己的編碼思想來解決這麼一個問題。特此給大家分享下！kissy demo連結    個人編寫的 demo連結   下面來一步步分析下我當初寫代碼的思路：    1. 首先是HTMl代碼如下： <h3>demo1:步長為0.8，下限為0, 預設是1</h3><div id="demo1"></div><button id="s40">設為40</button><button id="increase">加一步</button><button id="decrease">減一步</button>  而我開啟控制項demo頁面時候 在Firefox遊覽器firebug看到如下代碼：    也就是說 <div id="demo1"></div> 裡面的span input代碼是JS自動產生的。  2. 我JS代碼做了如下事情：       1.  先判斷傳進來的容器類型判斷. 支援 demo1,#demo1,.demo1,$('#demo1') 這幾種容器類型的傳參數。如下代碼判斷： 複製代碼/*     * 判斷傳進來的容器參數類型     */    _type: function(){        var self = this,            _config = self.config,            _cache = self.cache;        if(_config.container != '') {             if($.isPlainObject(_config.container)) {            _config.container = _config.container;             }else if(/^\./.test(_config.container)){                _config.container = $(_config.container);             }else if(/^#/.test(_config.container)) {                _config.container = $(_config.container);             }else if($('#' + _config.container)) {                _config.container = $('#' + _config.container);             }else {                alert('傳參的類型有誤!請重新傳參!');            }         }else {            return;        }    },複製代碼      2. 渲染相對應容器裡面的代碼，也就是span input標籤那些HTML代碼。如下： 複製代碼/*     * 渲染html     */    _renderHTML: function(){        var self = this,            _config = self.config,            _cache = self.cache;        var html = '';        html += '<span class="'+_config.elCls+'-amount-wrap">' +                     '<input type="text" title="請輸入數字" value="'+_config.val+'" class="'+_config.elCls+'-amount-input"/>' +                    '<span class="'+_config.elCls+'-amount-increase"></span>' +                     '<span class="'+_config.elCls+'-amount-decrease"></span>' +                 '</span>';        $(_config.container).append(html);    },複製代碼  3. 綁定事件(包括點擊，↑↓鍵操作等)。      1. 點擊下一頁按鈕 或者↑ 操作時候 調用 增加方法：increase 代碼如下： 複製代碼/*     * 增加方法 擷取input值 然後加個步長 (每次點擊時候 判斷此值是否大於maxVal)     * @method {increase public}     */    increase: function() {        var self = this,            _config = self.config,            _cache = self.cache;         var inputVal = $.trim($('.' + _config.elCls + "-amount-input",_config.container).attr('value'));        if(inputVal * 1 < _config.maxVal * 1) {                        var curVal = self._addFun(inputVal * 1,_config.step * 1);            if(curVal >= _config.maxVal * 1) {                curVal = _config.maxVal * 1;            }            $('.' + _config.elCls + "-amount-input",_config.container).val(curVal);            $('.' + _config.elCls + "-amount-input",_config.container).attr('value',curVal);             // 回調            _config.nextFunc && $.isFunction(_config.nextFunc) && _config.nextFunc({value:curVal});        }                },複製代碼     2. 點擊上一頁按鈕時候 或者 ↓鍵操作 時候 調用 decrease(減少方法)。如下代碼： 複製代碼/*     * 減少方法 擷取input值 然後減去步長 (每次點擊時候 判斷此值是否大於minVal)     * @method {decrease public}     */    decrease: function() {        var self = this,            _config = self.config;        var inputVal = $.trim($('.' + _config.elCls + "-amount-input",_config.container).attr('value'));        if(inputVal * 1 > _config.minVal * 1) {            var curVal = self._subtraction(inputVal * 1, _config.step * 1);            if(curVal <= _config.minVal * 1) {                curVal = _config.minVal * 1;            }            $('.' + _config.elCls + "-amount-input",_config.container).val(curVal);            $('.' + _config.elCls + "-amount-input",_config.container).attr('value',curVal);             // 回調            _config.prevFunc && $.isFunction(_config.prevFunc) && _config.prevFunc({value:curVal});        }    },複製代碼     3. 同樣支援在外部設定值 比如 我new一個執行個體後 我想點擊一個按鈕後 直接讓此到某個值上 可以直接用new出來的執行個體調用setVal 方法。代碼如下： 複製代碼/*     * 可以供外部直接設定值     * @method {setVal public}      */    setVal: function(val) {        var self = this,            _config = self.config;         // 簡單的判斷下 此值是否是數字型的        if(/\d/.test(val)) {            $('.' + _config.elCls + "-amount-input",_config.container).val(val);            $('.' + _config.elCls + "-amount-input",_config.container).attr('value',val);        }    },複製代碼     4. 由於需求不斷的變增 所以配置項時候 步長有可能是小數 比如 點擊一下 增加0.5步長 那麼在計算的時候 會有誤差(因為電腦儲存的是以2進位儲存的)，那麼處理這樣的方法用到了 上一篇文章  關於javascript中對浮點加，減，乘，除的精度分析 . 可配置的參數如下container 必須，控制項插入的容器 預設為空白 val 1          // input初始值 預設為1 可以根據自己配置 step 1,        // 步長 一次改變的變化值 預設為 1 minVal 0,       // 限下值 預設為0 maxVal 100,   // 限上值 預設為100 elCls 'data', // 自訂的首碼的類名 預設為data prevFunc  點擊上一頁按鈕 的回呼函數 nextFunc  點擊下一頁按鈕的 回呼函數下面貼下HTML代碼如下： <h3>demo1:步長為0.8，下限為0, 預設是1</h3><div id="demo1"></div><button id="s40">設為40</button><button id="increase">加一步</button><button id="decrease">減一步</button>CSS代碼：  View CodeJS代碼如下：  View Code初始化代碼如下： 複製代碼 // 初始化     $(function(){        var a = new Amount({            container : '#demo1',            step : '0.8',            maxVal : '100'        })        $('#s40').click(function(){            a.setVal(40);        });        $("#increase").click(function(){            a.increase();        });         $("#decrease").click(function(){            a.decrease();        });     });