基于 JQuery 的简单计时牌
2013年12月6日
没有评论
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