jquery 写的倒计时

最新推荐文章于 2024-04-11 15:41:01 发布

小皮皮不皮

最新推荐文章于 2024-04-11 15:41:01 发布

阅读量480

点赞数

分类专栏： js 面试题

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

面试题

6 篇文章 0 订阅

订阅专栏

这个是别人写好的案例,感觉非常方便,只要在标签data属性中写上自己要开始倒计时的时间就好了,其他的都不需要修改,唯一要弄得就是自已想要的样式,,, 记得引入jq 哦

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>倒计时插件</title>
<style>
	h3{margin-top: 30px}	
	.ys1{
		color: #009AC1;
		font-weight: bold;
	}
	.ys2{
	color: #2FAB11;
	font-weight: bold;
	}
	.ys3{
	color: #C16000;
	font-weight: bold;
	}
</style>
</head>
<body>
<div class="container">
     <h3>120秒倒计时</h3>
     <p>data="120" </p>
	<div class="container timeBar ys1" data="120" ></div>
	
	<h3>600秒倒计时</h3>
	<p>data="600秒倒计时" </p>
	<div class="container timeBar ys2" data="600" ></div>
	
	<h3>160000秒倒计时</h3>
	<p>data="160000" </p>
	<div class="container timeBar ys3" data="160000" ></div>
</div>

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/countdown.js"></script>
<script type="text/javascript">
	$(function(){
		$(".timeBar").each(function () {
			$(this).countdownsync({
				dayTag: "",
				hourTag: "<label class='tt hh dib vam'>00</label><span>时</span>",
				minTag: "<label class='tt mm dib vam'>00</label><span>分</span>",
				secTag: "<label class='tt ss dib vam'>00</label><span>秒</span>",
				dayClass: ".dd",
				hourClass: ".hh",
				minClass: ".mm",
				secClass: ".ss",
				isDefault: false,
				showTemp:1

			}, function () {
				location.reload();
			});
		});
	});
	
</script>

</body>
</html>

countdown.js

/** 
 * 倒计时插件
 * @author Tungse
 * @param dayTag           显示天数的html
 * @param hourTag          显示小时的html
 * @param minTag           显示分钟的html
 * @param secTag           显示秒数的html
 * @param dayClass         绑定天数对应tag的ClassName
 * @param hourClass        绑定小时对应tag的ClassName
 * @param minClass         绑定分钟对应tag的ClassName
 * @param secClass         绑定秒数对应tag的ClassName
 * @param isDefault        是否使用默认tagTemp
 * @param showTemp         显示模板0：(天时分秒) 1：(时分秒)
 * @param backfun          定时完成回调
 */
(function ($) {
    $.fn.countdownsync = function (tagTemp, backfun) {
      var data = "";
      var _DOM = null;
      var _defaultTag = _TempTag = {
          dayTag: "<li class='countdownday'></li><li class='split'>天</li>",
          hourTag: "<li class='countdownhour'></li><li class='split'>:</li>",
          minTag: "<li class='countdownmin'></li><li class='split'>:</li>",
          secTag: "<li class='countdownsec'></li><li class='split'>:</li>",
          dayClass: ".countdownday",
          hourClass: ".countdownhour",
          minClass: ".countdownmin",
          secClass: ".countdownsec",
          isDefault: false,
          showTemp:0
      };
      var _temp = $.extend(_TempTag, tagTemp);
      var TIMER;
      createdom = function (dom) {
          _DOM = dom;
          data = Math.round($(dom).attr("data"));
          var htmlstr = (_temp.showTemp == 0 ? _temp.dayTag : "") + _temp.hourTag + _temp.minTag + _temp.secTag;
          if (_temp.isDefault) {
              htmlstr = (_temp.showTemp == 0 ? _defaultTag.dayTag : "") + _defaultTag.hourTag + _defaultTag.minTag + _defaultTag.secTag;
              htmlstr = "<ul class='countdown'>" + htmlstr + "</ul>";
              $("head").append("<style type='text/css'>.countdown {list-style:none;}.countdown li{float:left;background:#000;color:#fff;border-radius:50%;padding:10px;font-size:14px; font-weight:bold;margin:10px;}.countdown li.split{background:none;margin:10px 0;padding:10px 0;color:#000000;}</style>");
          }
          $(_DOM).html(htmlstr);
          reflash();
      };
      reflash = function () {
          var range = data,
                      secday = 86400, sechour = 3600,
                      days = parseInt(range / secday),
                      hours = _temp.showTemp == 0 ? parseInt((range % secday) / sechour) : parseInt(range / sechour),
                      min = parseInt(((range % secday) % sechour) / 60),
                      sec = ((range % secday) % sechour) % 60;
          data--;
          if (range < 0) {
              window.clearInterval(TIMER); //清楚定时器
          } else {
              $(_DOM).find(_temp.dayClass).html(nol(days));
              $(_DOM).find(_temp.hourClass).html(nol(hours));
              $(_DOM).find(_temp.minClass).html(nol(min));
              $(_DOM).find(_temp.secClass).html(nol(sec));
          }
          if ((range - 1) == 0) {
              undefined == backfun ? function () { } : backfun();
          }
      };
      TIMER = setInterval(reflash, 1000);
      nol = function (h) {
          return h > 9 ? h : '0' + h;
      };
      return this.each(function () {
          var $box = $(this);
          createdom($box);
      });
  };
 
})(jQuery);