商品抢购倒计时效果代码实例
分类:实例代码
商品抢购倒计时效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
现在比较流行商品抢购活动,为了达到比较人性化的效果,通常有一个倒计时。
下面分享一个比较简陋的商品抢购倒计时效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #demo { text-align: center; color: red; } </style> <script type="text/javascript"> window.onload = function() { var demo = document.getElementById("demo"); var outTime = new Date("2016/12/12 12:00:00"); setInterval(fun, 1000); function fun() { var newTime = new Date(); var ms = parseInt((outTime.getTime() - newTime.getTime()) / 1000); var d = parseInt(ms / 3600 / 24); // var h = parseInt(ms / 3600 % 24); var m = parseInt(ms / 60 % 60); var s = parseInt(ms % 60); d < 10 ? "d" + 0 : d; h < 10 ? "h" + 0 : h; m < 10 ? "m" + 0 : m; s < 10 ? "s" + 0 : s; demo.innerHTML = "距离抢购时间还有" + d + "天" + h + "时" + m + "分" + s + "秒"; } } </script> </head> <body> <div id="demo"> </div> </body> </html>
商品抢购倒计时效果代码实例,这样的场景在实际项目中还是用的比较多的,关于商品抢购倒计时效果代码实例就介绍到这了。