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

//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;

};

　　

　

js/jq 倒计时插件（一）的更多相关文章

  1. js 简单倒计时插件和使用方法

    // 倒计时插件 (function (){ function countdown(config){ var startDate = config.start ? new Date(config.st ...

  2. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  3. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  4. 及其简易的js 倒计时插件

    网上虽然有很多漂亮的且很实用的倒计时插件,但是,对于需要自己定制的倒计时来讲确实一个不小的障碍.最近我们的英语在线教育产品,在线考试模块需要用到一个计时器,所以顺势开发了一个自己的及时器. http: ...

  5. jq分页插件

    jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...

  6. 怎么用jq封装插件

    怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再 ...

  7. 微信小程序之倒计时插件 wxTimer

    微信小程序之倒计时插件   wxTimer 介绍: 用于在微信小程序中进行倒计时的组件. 功能: 1.最基础的当然就是倒计时功能了. 2.可以设置倒计时结束后执行的事件. 3.可以设置倒计时执行过程中 ...

  8. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  9. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

随机推荐

  1. 2019 rode of my LeetCode

    基于自己的算法实操水平如此之菜,开始开启leetcode狂刷之路! 2019先定个小目标100题. 2018年经历了辞职到考研失利,我觉得这大概是一生中最低谷的时候了吧. 2019年收拾心情重新开始好 ...

  2. System Trace in Depth

    原理 使用 system trace 时,会记录最近 5s 的 kernel trace,然后分析下面的操作: Scheduling activity System calls Virtual mem ...

  3. docker微服务部署之：七、Rancher进行微服务扩容和缩容

    docker微服务部署之:六.Rancher管理部署微服务 Rancher有两个特色用起来很方便,那就是扩容和缩容. 一.扩容前的准备工作 为了能直观的查看效果,需要修改下demo_article项目 ...

  4. easyui combobox下拉框复制后再禁用，点击不会出现下拉框

    easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...

  5. openerp QWeb

    1.web 模块 注意,OpenERP 模块中 web 部分用到的所有文件必须被放置在模块内的 static 文件夹里.这是强制性的,出于安全考虑. 事实上,我们创建的文件夹 CSS,JS 和 XML ...

  6. 【转】linux下杀死进程（kill）的N种方法

    转载一篇,最原始的出处已不可考,望见谅! 常规篇: 首先,用ps查看进程,方法如下: $ ps -ef ……smx       1822     1  0 11:38 ?        00:00:4 ...

  7. Java之集合(十三)WeakHashMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7423818.html 1.前言 本章介绍一下WeakHashMap,这个类也很重要.要想明白此类的作用,先要明白 ...

  8. pointer-events/H5页面在iphone6 plus的微信上出现闪退

    一.pointer-events 1.元素加上pointer-events:none后,在js中加点击事件不好使 原因:pointer-events:none关闭所有点击事件,包括js总的 解决:删掉 ...

  9. 计算机上面常用的计算单位 & 个人计算机架构与接口设备

    不多说,直接上干货! 计算机上面常用的计算单位 容量单位  速度单位  此网络常使用的单位为 Mbps 是 Mbits per second,亦即是每秒多少 Mbit. 个人计算机架构与接口设备 整个 ...

  10. 广州.NET俱乐部简介

    广州.NET俱乐部 简介 广州 .NET 俱乐部自2018年底重新在广州地区活跃. 目前已经成功在广州.深圳.苏州和东莞组织并参与了多长线下技术交流活动. 已经有超过1200+人加入了俱乐部线上社区. ...