JQuery仿小米手机抢购页面倒计时效果

前端之家收集整理的这篇文章主要介绍了JQuery仿小米手机抢购页面倒计时效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、效果功能说明

通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒。

2、实现原理

首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久。

主要代码

代码如下:
调用设置年份 startTime.setHours(23); //调用设置指定的时间的小时字段 startTime.setMinutes(59); //调用设置指定时间的分钟字段 startTime.setSeconds(59); //调用设置指定时间的秒钟字段 startTime.setMilliseconds(999); //调用置指定时间的毫秒字段 var EndTime=startTime.getTime(); //获得截至的时间 var nMS = EndTime - NowTime.getTime(); //截至时间减去当前时间获得剩余时间 var nD = Math.floor(nMS/(1000 * 60 * 60 * 24)); //定义参数 获得天数 var nH = Math.floor(nMS/(1000*60*60)) % 24; //定义参数 获得小时 var nM = Math.floor(nMS/(1000*60)) % 60; //定义参数 获得分钟 var nS = Math.floor(nMS/1000) % 60; //定义参数 获得秒钟 这些就是当前时间

3、运行环境 IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

4、所有图片的压缩包新建一个文件后将包解压放进文件图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

5、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果

6、代码

代码如下:

7、倒计时完成后,设置按钮的hidden属性为false,简单吧~

代码是从本人项目中截取出来的,小伙伴们可以放心使用,如有疑问,请留言。

猜你在找的jQuery相关文章