简明现代魔法 -> JavaScript -> JavaScript秒杀倒计时效果制作

JavaScript秒杀倒计时效果制作

2011-05-06

现在电子商务红红火火的,什么秒杀,限时什么的,JavaScript的倒计时用得很广泛。下面就来做一个倒计时效果,先来看效果。

效果演示

随便写的代码,还有待改进。下面是源代码:

JavaScript Code

<script type="text/javascript" language="javascript">
	//总时间,以分为单位
	var time = 100;

	//小时
	var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0;
	//分
	var m = time % 60;
	//秒
	var s = 60;

	//输出到当前Script的Dom位置
	document.write('<span>限时秒杀,还剩余<font id="f_hh">' + h + '</font>小时<font id="f_mm">' + m + '</font>分<font id="f_ss">' + s + '</font>秒</span>');

	//开始执行倒计时
	var timeInterval = setInterval(function () {
		//如果时、分、秒都为0时将停止当前的倒计时
		if (h == 0 && m == 0 && s == 0) { clearInterval(timeInterval); return; }
		//当秒走到0时,再次为60秒
		if (s == 0) { s = 60; }
		if (s == 60) {
			//每次当秒走到60秒时,分钟减一
      		m -= 1;
    		//当分等于0时并且小时还多余1个小时的时候进里面看看
      		if (m == 0 && h > 0) {
          		//小时减一
          		h -= 1;
          		//分钟自动默认为60分
             	m = 60;
         		//秒自动默认为60秒
             	s = 60;
        	}
		}
		//秒继续跳动,减一
     	s -= 1;
      	//小时赋值
      	document.getElementById('f_hh').innerHTML = h;
      	//分钟赋值
 		document.getElementById('f_mm').innerHTML = m;
  		//秒赋值
      	document.getElementById('f_ss').innerHTML = s;
	}, 1000);
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们