设置时分秒，样本效果图：DEMO：
<!doctype html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>时间</title> <style> *{margin: 0px; padding: 0px;} ul,li{list-style: none;} .main{margin: 100px auto; text-align: center;} .setTime{display: inline-block; text-align: center; font-size: 72px; border: 1px solid #efefef; border-radius: 6px; padding: 8px; } .setTime ul{overflow: hidden;} .setTime li{float: left; width: 100px;} .setTime li.point{width: 30px;} .setTime .btn{display: block; height: 20px; line-height: 20px; font-size: 12px; background: #ececec; cursor: pointer;} .setTime .unspan{display: block; height: 20px; line-height: 20px; font-size: 12px;} .mess{margin-top: 30px; font-size: 14px; line-height: 20px;} </style> </head> <body> <div class="main"> <div id="test"></div> <div class="mess"> 1、鼠标点击选择上一个或下一个。<br/> 2、鼠标按住不放，可以自动选择上一个或下一个。 </div> </div> <script src="https://files.cnblogs.com/kuikui/jquery-1.10.2.min.js"></script> <script> (function($, window, document) { function setTime(elem, options, defaults) { var options = $.extend({}, defaults, options); this.opts = options; this.elem = elem; this.init(); }; setTime.prototype = { init: function() { var _this = this; _this.createHtml(); _this.events(); }, createHtml: function(){ var _this = this; var html = ""; html += "<div class='setTime'>"; html += "<ul>"; html += "<li><span class='btn btnpre' data-hours='hours'>上</span><div class='num'>08</div><span class='btn btnext' data-hours='hours'>下</span></li>"; html += "<li class='point'><span class='unspan'> </span><div>:</div><span class='unspan'> </span></li>"; html += "<li><span class='btn btnpre'>上</span><div class='num'>00</div><span class='btn btnext'>下</span></li>"; html += "<li class='point'><span class='unspan'> </span><div>:</div><span class='unspan'> </span></li>"; html += "<li><span class='btn btnpre'>上</span><div class='num'>00</div><span class='btn btnext'>下</span></li>"; html += "</ul>"; html += "</div>"; _this.elem.html(html); }, dbNum: function(num){ return num.toString().length===2?num:"0"+num; }, events: function(){ var _this = this; var pre = _this.elem.find(".btnpre"), next = _this.elem.find(".btnext"), preStop = null, isPreM = false, nextStop = null, isNextM = false; $(document).on("mousedown",pre.selector,function(){ var $this = $(this); var elemnum = $this.parent().find(".num"), num = parseInt(elemnum.text()); preStop = setInterval(function(){ isPreM = true; num--; if($this.attr("data-hours")==="hours"){ if(num<0){ num = 23; } } else{ if(num<0){ num = 59; } } elemnum.text(_this.dbNum(num)); },600); }); $(document).on("mouseup",pre.selector,function(){ _this.isPreM = true; clearInterval(preStop); if(!isPreM){ var $this = $(this); var elemnum = $this.parent().find(".num"), num = parseInt(elemnum.text()); num--; if($this.attr("data-hours")==="hours"){ if(num<0){ num = 23; } } else{ if(num<0){ num = 59; } } elemnum.text(_this.dbNum(num)); } }); $(document).on("mousedown",next.selector,function(){ var $this = $(this); var elemnum = $this.parent().find(".num"), num = parseInt(elemnum.text()); preStop = setInterval(function(){ isPreM = true; num++; if($this.attr("data-hours")==="hours"){ if(num>23){ num = 0; } } else{ if(num>59){ num = 0; } } elemnum.text(_this.dbNum(num)); },600); }); $(document).on("mouseup",next.selector,function(){ _this.isPreM = true; clearInterval(preStop); if(!isPreM){ var $this = $(this); var elemnum = $this.parent().find(".num"), num = parseInt(elemnum.text()); num++; if($this.attr("data-hours")==="hours"){ if(num>23){ num = 0; } } else{ if(num>59){ num = 0; } } elemnum.text(_this.dbNum(num)); } }); } }; $.fn.setTime = function(options) { var defaults = { }; if(!this.selector){ return; } new setTime(this, options, defaults); }; })(jQuery, window, document); $("#test").setTime(); </script> </body> </html>
运行代码
