js倒计时效果 限时秒杀抢购打折等效果示例
网站购物做限时抢购、秒杀的JS倒计时代码,之前做的活动页面很多都用到了倒计时功能,所以整理下分享给大家。css根据不同做出你自已想要的美化效果,这里主要写出没有BUG的JS代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } span{ width: 36px; height: 36px; background: darkcyan; color: white; } </style> <script type="text/javascript"> window.onload = function(){ var t; function hs(){ var new_time = new Date(); var wl_time = new Date(2018,8,10,0,30,0); var xsj = wl_time.getTime() - new_time.getTime(); if (xsj<0) { xsj=0; } if (xsj==0) { clearInterval(t); // tian = '00'; // xiaosi = '00'; // fen = '00'; // miao = '00'; } var tian = parseInt(xsj/(24*60*60*1000)); if (tian<10) { tian = "0"+tian; } xsj = xsj%(24*60*60*1000); var xiaosi = parseInt(xsj/(60*60*1000)); if (xiaosi<10) { xiaosi = '0'+xiaosi; } xsj = xsj%(60*60*1000); var fen = parseInt(xsj/(60*1000)); if (fen<10) { fen = '0'+fen; } xsj = xsj%(60*1000); var miao = parseInt(xsj/1000); if (miao<10) { miao = '0'+miao; } // var time = document.getElementById('time'); var kk = document.getElementById('time').getElementsByTagName('span'); kk[0].innerHTML = tian; kk[1].innerHTML = xiaosi; kk[2].innerHTML = fen; kk[3].innerHTML = miao; } hs(); t = setInterval(hs,1000); } </script> </head> <body> <div id="time">距离百家惠全场打折活动还剩<span>0</span>天<span>0</span>小时<span>0</span>分钟<span>0</span>秒</div> </body> </html>
原文链接:https://www.qiquanji.com/post/7371.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。