Code666 (代码贴、代码片段)

[JavaScript] 团购倒计时特效代码 （天数 日期 分 时 秒） →→→→→进入此内容的聊天室

来自 , 2019-07-08, 写在 JavaScript, 查看 101 次.
URL http://www.code666.cn/view/621bf66d
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>倒计时测试</title>
  6. <script src="http://liuxiaofan.com/demo/jquery-1.6.4.min.js" type="text/javascript"></script>
  7. <script>
  8.   function lxfEndtime(){
  9.           $(".lxftime").each(function(){
  10.                 var lxfday=$(this).attr("lxfday");//用来判断是否显示天数的变量
  11.                 var endtime = new Date($(this).attr("endtime")).getTime();//取结束日期(毫秒值)
  12.                 var nowtime = new Date().getTime();        //今天的日期(毫秒值)
  13.                 var youtime = endtime-nowtime;//还有多久(毫秒值)
  14.                 var seconds = youtime/1000;
  15.                 var minutes = Math.floor(seconds/60);
  16.                 var hours = Math.floor(minutes/60);
  17.                 var days = Math.floor(hours/24);
  18.                 var CDay= days ;
  19.                 var CHour= hours % 24;
  20.                 var CMinute= minutes % 60;
  21.                 var CSecond= Math.floor(seconds%60);//"%"是取余运算，可以理解为60进一后取余数，然后只要余数。
  22.                 if(endtime<=nowtime){
  23.                         $(this).html("已过期")//如果结束日期小于当前日期就提示过期啦
  24.                         }else{
  25.                                 if($(this).attr("lxfday")=="no"){
  26.                                         $(this).html("<i>剩余时间：</i><span>"+CHour+"</span>时<span>"+CMinute+"</span>分<span>"+CSecond+"</span>秒");          //输出没有天数的数据
  27.                                         }else{
  28.                         $(this).html("<i>剩余时间：</i><span>"+days+"</span><em>天</em><span>"+CHour+"</span><em>时</em><span>"+CMinute+"</span><em>分</em><span>"+CSecond+"</span><em>秒</em>");          //输出有天数的数据
  29.                                 }
  30.                         }
  31.           });
  32.    setTimeout("lxfEndtime()",1000);
  33.   };
  34. $(function(){
  35.       lxfEndtime();
  36.    });
  37. </script>
  38. <style type="text/css">
  39. <!--
  40. *{
  41.         font-style: normal;
  42.         font-weight: normal;}
  43. .haveday {
  44.         padding: 20px;
  45.         border: 1px dashed #000;
  46.         margin-right: auto;
  47.         margin-left: auto;
  48.         width: 300px;
  49. }
  50. -->
  51. </style>
  52. </head>
  53. <body>
  54. <div class="haveday">
  55. <h1>含有天数的倒计时</h1>
  56. <div class="lxftime" endtime="11/15/2011 17:24:0"></div>
  57. <div class="lxftime" endtime="11/8/2011 3:3:20"></div>
  58. <div class="lxftime" endtime="9/6/2015 6:1:0"></div>
  59. <div class="lxftime" endtime="6/6/2016 9:3:5"></div>
  60. </div>
  61. <p></p>
  62. <div class="haveday">
  63. <h1>没有天数的倒计时</h1>
  64. <div class="lxftime" endtime="11/15/2011 17:24:0" lxfday="no"></div>
  65. <div class="lxftime" endtime="11/8/2011 3:3:20" lxfday="no"></div>
  66. <div class="lxftime" endtime="9/6/2015 6:1:0" lxfday="no"></div>
  67. <div class="lxftime" endtime="6/6/2016 9:3:5" lxfday="no"></div>
  68. </div>
  69. </body>
  70. </html>

回复 "团购倒计时特效代码 （天数 日期 分 时 秒）"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666