知识学习

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 2880|回复: 0

DESTOON采购页面加入好看的倒计时

[复制链接]

升级   100%

152

主题

0

回帖

752

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
752
发表于 2020-9-16 00:06:03 | 显示全部楼层 |阅读模式
倒计时精确到天, 时,分,秒

看图 https://st04.taomodi.com/buy/show.php?itemid=100  有倒计时显示网网址


  

这段代码放在你想显示的位置即可

  1. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none; font-size: 16px; font-family: Tahoma, " microsoft="" yahei",="" simsun;="" line-height:="" 21px;"=""><span id="timer" ></span>  </span>
  2. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none; font-size: 16px; font-family: Tahoma, " microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">         </span>
  3. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none; font-size: 16px; font-family: Tahoma, " microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        {if $totime}</span>
  4. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none; font-size: 16px; font-family: Tahoma, " microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        </span>
  5. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none; font-size: 16px; font-family: Tahoma, " microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        <s<span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;">cript type="text/javas<span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;">cript">  </span>
  6. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">function TimeTo(dd){  </span>
  7. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">    var t = new Date(dd),//取得指定时间的总毫秒数  </span>
  8. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        n = new Date().getTime(),//取得当前毫秒数  </span>
  9. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        c = t - n;//得到时间差  </span>
  10. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">    if(c<=0){//如果差小于等于0  也就是过期或者正好过期,则推出程序  </span>
  11. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        docu<span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;">ment.getElementById('timer').innerHTML ='活动已经结束';  </span>
  12. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        clearInterval(window['ttt']);//清除计时器  </span>
  13. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        return;//结束执行  </span>
  14. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">    }  </span>
  15. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">    var ds = 60*60*24*1000,//一天共多少毫秒  </span>
  16. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        d = parseInt(c/ds),//总毫秒除以一天的毫秒 得到相差的天数  </span>
  17. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        h = parseInt((c-d*ds)/(3600*1000)),//然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时  </span>
  18. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        m = parseInt((c - d*ds - h*3600*1000)/(60*1000)),//减去天数和小时数的毫秒数剩下的毫秒,再除以每分钟的毫秒数,得到分钟数  </span>
  19. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        s = parseInt((c-d*ds-h*3600*1000-m*60*1000)/1000);//得到最后剩下的毫秒数除以1000 就是秒数,再剩下的毫秒自动忽略即可  </span>
  20. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">         docu<span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;">ment.getElementById('timer').innerHTML = ' <b>'+d+'</b> 天 <b>'+h+'</b></b> 时 <b>'+m+'</b> 分 <b class="ss">'+s+'</b> 秒';//最后这句讲定义好的显示 更新到 ID为 timer的 div中</span>
  21. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">}  </span>
  22. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">(function(){  </span>
  23. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">    window['ttt']=setInterval(function(){  </span>
  24. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">    TimeTo('{date('Y/m/d', $totime)} 23:59:59');//定义倒计时的结束时间,注意格式  </span>
  25. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">    },1000);//定义计时器,每隔1000毫秒 也就是1秒 计算并更新 div的显示  </span>
  26. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">})();  </span>
  27. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"=""></s<span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;">cript>  </span>
  28. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        </span>
  29. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">        </span>
  30. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">      {else}</span>
  31. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">      长期有效         </span>
  32. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">      {/if}</span>
  33. <span style="box-sizing: border-box; word-break: break-all; text-size-adjust: none;" microsoft="" yahei",="" simsun;="" line-height:="" 21px;"="">       {if $expired} <span class="f_red">[已过期]</span>{/if} </span></span></span></span></span></span>
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|知识学习 ( 鲁ICP备20015483号 )

GMT+8, 2026-5-13 21:57 , Processed in 0.059136 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表