js/jq 倒计时插件(一)

//很多时候我们需要用到倒计时比如(一些发布会倒计时,秒杀倒计时,活动倒计时等),接下来将介绍两种倒计时插件的写法

//html结构

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="jquery-2.1.3.min.js"></script>
<style>
	.downTim {
		font-size: 16px;
		color: #000;
	}

</style>

<body>
	<!--一般的活动需要倒计时,也有活动持续时间-->
	<!--data-difftime是倒计时时间-->
	<!--data-goingtime是倒计是结束后活动进行持续时间-->
	<div class="downTim" data-difftime="3600" data-goingtime='6000'>
        <div class="downTim" data-difftime="3600" data-goingtime='6000'></div>
    
</body>
<script src="downTime.js"></script>
<script>
	$(function() {
		downTimeFun();
	});

</script>

</html>    

 

html文件中定义了两个时间,有疑问了?为什么要定义这两个时间?

因为:不直接new Date()获取当前时间来倒计时是避免设备(电脑手机)上的本地时间被恶意修改,这样定义时间就可以由服务器端传入时间,由服务器去控制这个时间

//dowbTime.js文件  

 

function downTimeFun() {
	//最开始的时间(js文件加载进来一开始拿到的本地时间)
	var zuikaishiTime = new Date();
	//相差值的时间
	var chazhiTime = zuikaishiTime;

	$(".downTim").each(function () {//有多个downTime元素,所以用each方法遍历
		var $this = $(this);
		//判断连接全局变量
		var in_app = null;
		//用来判断是否显示天数的变量
		var lxfday = $this.attr("lxfday");
		//多少时间后倒计时
		var _difftime = $this.attr("data-difftime") * 1000;
		//活动持续进行多少时间
		var _goingtime = $this.attr('data-goingtime') * 1000;

		//每一秒轮回一次执行的倒计时函数
		var lunfun = function () {
			//绝对时间计算方式(轮回每次后拿到的本地时间)
			chazhiTime = new Date();
			//经过了多少秒(每次拿到的本地时间-最开始拿到的本地时间)
			var jingguoTime = chazhiTime - zuikaishiTime;
			//倒计时剩余时间(倒计时的总时间-经过了的时间)
			var difftime = _difftime - jingguoTime;
			//活动剩余时间(活动持续进行总时间-经过的时间)
			var goingtime = _goingtime - jingguoTime;
			//转换
			//毫秒除以1000得秒
			var seconds = difftime / 1000;
			//秒除以60得分(用Math.floor方法向下取时间)
			var minutes = Math.floor(seconds / 60);
			//取时
			var hours = Math.floor(minutes / 60);
			//取天
			var days = Math.floor(hours / 24);
			
			//"%"是取余运算,可以理解为60进一后取余数,然后只要余数。
			var CHour = hours % 24;
			var CMinute = minutes % 60;
			var CSecond = Math.floor(seconds % 60);
			//小于9的数前面都补上0
			if (CHour <= 9) CHour = '0' + CHour;
			if (CMinute <= 9) CMinute = '0' + CMinute;
			if (CSecond <= 9) CSecond = '0' + CSecond;

			//减去倒计时,活动持续时间的数据
			var holdtime = difftime + goingtime;

			if (holdtime <= 0) {
				//已经结束
				$this.html("<span>已经结束</span>");
			} else if (holdtime > 0 && 0 < difftime) {
				//还没开始
				if (days == 0) {
					//输出没有天数的数据
					$this.html("倒计时 <span>" + CHour + "</span>:<span>" + CMinute + "</span>:<span>" + CSecond + "</span>");
				} else {
					//输出有天数的数据
					$this.html("倒计时 <span>" + days + "</span>天<span>" + CHour + "</span>:<span>" + CMinute + "</span>" + CSecond + "</span>");
				};
				setTimeout(function () {
					if (!difftime <= 0) {
						lunfun();
					}
				}, 1000);
			} else if (holdtime > 0 && difftime <= 0) {
				//正在进行时的时间
				$this.html("<span>正在进行时</span>");
				setTimeout(function () {
					if (!holdtime <= 0) {
						lunfun();
					}
				}, 1000);
			};
		};
		lunfun();

	});
	window.downTimeFun = downTimeFun;
};

  

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值