jQuery黑色HTC时钟翻牌样式倒计时特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery黑色HTC时钟翻牌样式倒计时特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<style type="text/css">
body{ font:normal 12px/24px '微软雅黑',tahoma;}
.wrapper {
	margin:0px auto;
	padding:20px;
	border:1px solid #CCC;
	width:550px;
	font-size:12px;
}
br {
	clear: both;
}
.cntSeparator {
	font-size: 54px;
	margin: 10px 7px;
	color: #000;
}
.desc {
	margin: 7px 3px;
}
.desc div {
	float: left;
	font-family: Arial;
	width: 70px;
	margin-right: 65px;
	font-size: 13px;
	font-weight: bold;
	color: #000;
}
</style>
</head>
<body>
    <!-- 代码 开始 -->
    <div class="wrapper">
        <div id="counter"></div>
        <div class="desc">
            <div>日</div>
            <div>小时</div>
            <div>分</div>
            <div>秒</div>
        </div>
        <br />
        <br />
        <br />
        <div id="counter_2"></div>
        <div class="desc">
            <div>分</div>
            <div>秒</div>
        </div>
    </div>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $('#counter').countdown({
                image: 'images/digits.png',
                startTime: '01:12:12:00'
            });

            $('#counter_2').countdown({
                image: 'images/digits.png',
                startTime: '00:10',
                timerEnd: function () { alert('end!'); },
                format: 'mm:ss'
            });
        });
    </script>
</body>
</html>

JS代码(jquery.countdown.js):

/* * jquery-counter plugin * * Copyright (c) 2009 Martin Conte Mac Donell <Reflejo@gmail.com> * Dual licensed under the MIT and GPL licenses. * http://docs.jquery.com/License */
jQuery.fn.countdown = function(userOptions){
	// Default options var options ={
	stepTime:60,// startTime and format MUST follow the same format. // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong) format:"dd:hh:mm:ss",startTime:"01:12:32:55",digitImages:6,digitWidth:53,digitHeight:77,timerEnd:function(){
}
,image:"digits.png"}
;
	var digits = [],interval;
	// Draw digits in given container var createDigits = function(where){
	var c = 0;
	// Iterate each startTime digit,if it is not a digit // we'll asume that it's a separator for (var i = 0;
	i < options.startTime.length;
	i++){
	if (parseInt(options.startTime[i]) >= 0){
	elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
	height:options.digitHeight * options.digitImages * 10,float:'left',background:'url(\'' + options.image + '\')',width:options.digitWidth}
);
	digits.push(elem);
	margin(c,-((parseInt(options.startTime[i]) * options.digitHeight * options.digitImages)));
	digits[c].__max = 9;
	// Add max digits,for example,first digit of minutes (mm) has // a max of 5. Conditional max is used when the left digit has reach // the max. For example second "hours" digit has a conditional max of 4 switch (options.format[i]){
	case 'h':digits[c].__max = (c % 2 == 0) ? 2:9;
	if (c % 2 == 0) digits[c].__condmax = 4;
	break;
	case 'd':digits[c].__max = 9;
	break;
	case 'm':case 's':digits[c].__max = (c % 2 == 0) ? 5:9;
}
++c;
}
else elem = $('<div class="cntSeparator"/>').css({
	float:'left'}
) .text(options.startTime[i]);
	where.append(elem)}
}
;
	// Set or get element margin var margin = function(elem,val){
	if (val !== undefined) return digits[elem].css({
	'marginTop':val + 'px'}
);
	return parseInt(digits[elem].css('marginTop').replace('px',''));
}
;
	// Makes the movement. This is done by "digitImages" steps. var moveStep = function(elem){
	digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
	return function _move(){
	mtop = margin(elem) + options.digitHeight;
	if (mtop == options.digitHeight){
	margin(elem,digits[elem]._digitInitial);
	if (elem > 0) moveStep(elem - 1)();
	else{
	clearInterval(interval);
	for (var i=0;
	i < digits.length;
	i++) margin(i,0);
	options.timerEnd();
	return;
}
if ((elem > 0) && (digits[elem].__condmax !== undefined) && (digits[elem - 1]._digitInitial == margin(elem - 1))) margin(elem,-(digits[elem].__condmax * options.digitHeight * options.digitImages));
	return;
}
margin(elem,mtop);
	if (margin(elem) / options.digitHeight % options.digitImages != 0) setTimeout(_move,options.stepTime);
	if (mtop == 0) digits[elem].__ismax = true;
}
}
;
	$.extend(options,userOptions);
	this.css({
	height:options.digitHeight,overflow:'hidden'}
);
	createDigits(this);
	interval = setInterval(moveStep(digits.length - 1),1000);
}
;

附件:下载该文件资源,减少时间成本(增值服务)