Welcome, Old Sport!

不错的倒计时效果 CSS & jQuery

by ilikecss ON 2011/05/03 13037

在一个国外偏僻的网站上看到的 jQuery 倒计时效果,感觉蛮不错的就扒了下来,经过调整可以兼容IE6了喜欢的朋友可以下载。下面就把参数解释一下,可随意调整时间。

'day': 		7, 距离你设定的时间 单位 (天数)
'month': 	5, 距离你设定的时间 单位 (月份)
'year': 	2011, 距离你设定的时间 单位 (年份)
'hour': 	18, 距离你设定的时间 单位 (小时)
'min': 		0, 距离你设定的时间 单位 (分钟)
'sec': 		0 距离你设定的时间 单位 (秒)

Step1. 创建HTML

<div id="countdown_dashboard">
    <div class="dash weeks_dash">
    <span>weeks</span>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    </div>

    <div class="dash days_dash">
    <span>days</span>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    </div>

    <div class="dash hours_dash">
    <span>hours</span>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    </div>

    <div class="dash minutes_dash">
    <span>minutes</span>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    </div>

    <div class="dash seconds_dash">
    <span>seconds</span>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    <div class="digit"><div class="top"></div><div class="bottom"></div></div>
    </div>
</div>

Step2. 创建CSS

#countdown_dashboard {
	margin: 150px auto 250px;
	width: 750px;
	position: relative;
	overflow: hidden;
}
.dash {
	float: left;
	height: 150px;
	margin: 0 30px 0 0;
	position: relative;
	display: inline;
	width: 120px;
}
.dash span {
	background: #000000;
	bottom: 0;
	display: block;
	left: 0;
	font-size: 1.5em;
	letter-spacing: 2px;
	text-transform: uppercase;
	width: 100%;
	z-index: 2;
}
.dash .digit {
	float: left;
	font-size: 9em;
	position: relative;
	width: 60px;
}

Step3. 插入jQuery和脚本包

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
<script type="text/javascript" src="js/misc.js"></script>
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
	targetDate: {
'day': 		7,
'month': 	5,
'year': 	2011,
'hour': 	18,
'min': 		0,
'sec': 		0
	}
});

});
17条评论
  1. #1

    Tan说道:

    nice

  2. #2

    Tan说道:

    这个在自己机子上时间动不起来。应该是我设置错误。是哪些地方需要如何设置?

    • 你好,下载下来直接就可以用的,我教程里第一段注释。

      ‘day’: 7, 距离你设定的时间 单位 (天数)
      ‘month’: 5, 距离你设定的时间 单位 (月份)
      ‘year’: 2011, 距离你设定的时间 单位 (年份)
      ‘hour’: 18, 距离你设定的时间 单位 (小时)
      ‘min’: 0, 距离你设定的时间 单位 (分钟)
      ‘sec’: 0 距离你设定的时间 单位 (秒)

      你把时间改一下就开始倒计时了,你不动可能是因为我设置的时间已经到了。

  3. #3

    ghz说道:

    如何去掉week,直接按天数开始统计呢

    • 去掉只能按照规定的年数来倒计时,比如设置1年,就是倒计时365天。
      是这宽插件设置的,不能像其他倒计时效果那样随便调整

  4. #4

    ccc说道:

    好奇怪 我刷新了 怎么倒计时 都重置了?

  5. #5

    康斯坦丁说道:

    同样出现,刷新就重置时间段问题。求解决办法

  6. #6

    图拉丁说道:

    :oops: 不会设置倒时,不知道前辈能否帮我看一下http://www.fengkuang.pub/

    • ilikecss说道:

      在你的theme.js里面
      /* ———————————————————————— */
      /* Count Down Timer
      /* ———————————————————————— */
      $(‘.countdown-container’).countDown({
      targetDate: {
      ‘day’: 9,
      ‘month’: 11,
      ‘year’: 2015,
      ‘hour’: 12,
      ‘min’: 30,
      ‘sec’: 0
      },
      omitWeeks: true
      });

      你把这里的年月日重新设置一下,已经过时了




TOP