首页 > Javascript > 基于 JQuery 的简单计时牌

基于 JQuery 的简单计时牌

2013年12月6日 发表评论 阅读评论

HTML 部分代码

0
0
:
0
0
:
0
0

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 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.