基于 JQuery 的简单计时牌
HTML 部分代码
00:00:00
CSS 部分代码
.digits{ float: left; width: 210px; height: 34px; font-family: Verdana, sans-serif; font-size: 28px; color: #FFF; line-height: 34px; padding-top: 6px;} .digits div.clock{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px; background: #000; margin-right: 2px; border-radius: 5px; overflow: hidden;} .digits div.clock ul{ list-style: none;} .digits div.clock ul li{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px;} .digits div.dot{ float: left; width: 12px; height: 34px;}
JS 部分代码
function goTimer(i, n) { if(!i){ i = 5; } if(!n){ n = '.clock'; } var c = $(n).eq(i); var p = c.hasClass('first') ? 6 : 10; var s = parseInt(c.find('li').eq(0).text()); s = s + 1; if(s === p){ s = 0; goTimer((i - 1)); } c.find('li').eq(1).text(s); c.children('ul').animate({marginTop: '-34px'}, 'fast', function(){ timer++; c.find('li').eq(0).text(s); c.children('ul').css({marginTop: '0px'}); }); }
分类: Javascript