夏日博客

A-A+

用Query高仿小米秒杀页面倒计时特效

2016年01月08日 前端设计 暂无评论 阅读 5 views 次

如果你抢过小米（当然很多人看不上粗粮），你应该看过小米抢购倒计时的效果，现在我们用Query仿制一个这样子的效果出来。

1、效果及功能说明

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

2、实现原理

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

主要代码如下:

  1. var startTime = new Date();  
  2. //获得当前的时间  
  3. startTime.setFullYear(2016, 5, 27);  
  4. //调用设置年份  
  5. startTime.setHours(23);  
  6. //调用设置指定的时间的小时字段  
  7. startTime.setMinutes(59);  
  8. //调用设置指定时间的分钟字段  
  9. startTime.setSeconds(59);  
  10. //调用设置指定时间的秒钟字段  
  11. startTime.setMilliseconds(999);  
  12. //调用置指定时间的毫秒字段  
  13. var EndTime=startTime.getTime();  
  14. //获得截至的时间  
  15. var nMS = EndTime - NowTime.getTime();  
  16. //截至时间减去当前时间获得剩余时间  
  17. var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));  
  18. //定义参数 获得天数  
  19. var nH = Math.floor(nMS/(1000*60*60)) % 24;  
  20. //定义参数 获得小时  
  21. var nM = Math.floor(nMS/(1000*60)) % 60;  
  22. //定义参数 获得分钟  
  23. var nS = Math.floor(nMS/1000) % 60;  
  24. //定义参数 获得秒钟 这些就是当前时间  

3、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google

Chrome游览器下都可实现

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

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

6、代码如下:

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  5. <style type="text/css">  
  6. *{margin:0;padding:0;list-style-type:none;}  
  7. a,img{border:0;}  
  8. body{font:12px/180%;background:#fff;}  
  9. .timerbg{background:url(images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;}  
  10. .timerbg div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family:"微软雅黑","宋体";}  
  11. .timerbg div strong{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;}  
  12. #daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}  
  13. </style>  
  14. </head>  
  15. <body>  
  16.     <div class="timerbg">  
  17.         <div id="daoend" style="display:none;">本次活动已结束。</div>  
  18.         <div id="dao"><strong id="RemainD"></strong>天<strong id="RemainH"></strong>时<strong id="RemainM"></strong>分<strong id="RemainS"></strong>秒</div>  
  19.     </div>  
  20.     <script type="text/javascript">  
  21.     var startTime = new Date();  
  22.     //定义参数可返回当天的日期和时间  
  23.     startTime.setFullYear(2016, 5, 27);  
  24.     //调用设置年份  
  25.     startTime.setHours(23);  
  26.     //调用设置指定的时间的小时字段  
  27.     startTime.setMinutes(59);  
  28.     //调用设置指定时间的分钟字段  
  29.     startTime.setSeconds(59);  
  30.     //调用设置指定时间的秒钟字段  
  31.     startTime.setMilliseconds(999);  
  32.     //调用置指定时间的毫秒字段  
  33.     var EndTime=startTime.getTime();  
  34.     //定义参数可返回距 1970 年 1 月 1 日之间的毫秒数  
  35.     function GetRTime(){  
  36.     //定义方法  
  37.         var NowTime = new Date();  
  38.         //定义参数可返回当天的日期和时间  
  39.         var nMS = EndTime - NowTime.getTime();  
  40.         //定义参数 EndTime减去NowTime参数获得返回距 1970 年 1 月 1 日之间的毫秒数  
  41.         var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));  
  42.         //定义参数 获得天数  
  43.         var nH = Math.floor(nMS/(1000*60*60)) % 24;  
  44.         //定义参数 获得小时  
  45.         var nM = Math.floor(nMS/(1000*60)) % 60;  
  46.         //定义参数 获得分钟  
  47.         var nS = Math.floor(nMS/1000) % 60;  
  48.         //定义参数 获得秒钟  
  49.         if (nMS < 0){  
  50.         //如果秒钟大于0  
  51.             $("#dao").hide();  
  52.             //获得天数隐藏  
  53.             $("#daoend").show();  
  54.             //获得活动截止时间展开  
  55.         }else{  
  56.         //否则  
  57.            $("#dao").show();  
  58.            //天数展开  
  59.            $("#daoend").hide();  
  60.            //活动截止时间隐藏  
  61.            $("#RemainD").text(nD);  
  62.            //显示天数  
  63.            $("#RemainH").text(nH);  
  64.            //显示小时  
  65.            $("#RemainM").text(nM);  
  66.            //显示分钟  
  67.            $("#RemainS").text(nS);  
  68.            //显示秒钟  
  69.         }  
  70.     }  
  71.     $(document).ready(function () {  
  72.     //定义方法  
  73.         var timer_rt = window.setInterval("GetRTime()", 1000);  
  74.         //定义参数 显示出GetRTime()方法 1000毫秒以后启动  
  75.     });  
  76.     </script>  
  77. </body>  
  78. </html>  

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

标签：

给我留言