設定時分秒，樣本
效果圖：
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>
<script src="http://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 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 += "</ul>";
html += "</div>";
_this.elem.html(html);
dbNum: function(num){
return num.toString().length===2?num:"0"+num;
events: function(){
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{
num = 59;
elemnum.text(_this.dbNum(num));
},600);
});
$(document).on("mouseup",pre.selector,function(){
_this.isPreM = true;
clearInterval(preStop);
if(!isPreM){
$(document).on("mousedown",next.selector,function(){
num++;
if(num>23){
num = 0;
if(num>59){
$(document).on("mouseup",next.selector,function(){
$.fn.setTime = function(options) {
var defaults = {
if(!this.selector){
return;
new setTime(this, options, defaults);
})(jQuery, window, document);
$("#test").setTime();
</script>
</body>
</html>
運作代碼
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)