js倒計時搶購實(shí)例
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)限時搶購,供大家參考,具體代碼如下
運(yùn)行效果圖:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>限時搶購倒計時</title> <style type="text/css"> body{ text-align: center; } #first{ color:#ff7300; font-size:30px; margin-left:10px; } </style> <script type="text/javascript"> window.onload=function(){ setInterval(changTime, 500); function changTime(){ document.getElementById("time").innerHTML=getTime(); changeStyle(); } function gR() { return Math.floor(Math.random()*16); } function changeStyle(){ var ele=document.getElementById("time"); var size=Math.random()*40; ele.style.fontSize=((size+10)+"px"); var mc=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); ele.style.color="#"+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()]; } function getTime(){ var now=new Date().getTime(); var end=new Date("2015/12/20").getTime(); var temp=end-now; if(temp<=0) { document.getElementById("first").innerHTML="搶購活動已結(jié)束?。。。?!"; return ""; }else { var temp2=new Date(); temp2.setTime(temp); var sec=Math.floor((temp)/1000%60); var min=Math.floor(temp/(60*1000)%60); var hou=Math.floor(temp/(60*60*1000)%24); var day=Math.floor(temp/(24*60*60*1000)); return day+"天 "+hou+"小時 "+min+"分鐘 "+sec+"秒"; } } }; </script> </head> <body> <br/><br/><br/><br/><br/> <span id="first">距離限時搶購還有 </span> <span id="time"></span> </body> </html>
更多關(guān)于倒計時的文章請查看專題:《倒計時功能》
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)簡單易用的手機(jī)端浮動窗口顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡單易用的手機(jī)端浮動窗口顯示效果,涉及javascript針對頁面元素的動態(tài)操作相關(guān)技巧,適用于做廣告展示,需要的朋友可以參考下2016-09-09echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽
項目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2022-12-12JS?TypeScript的Map對象及聯(lián)合類型實(shí)戰(zhàn)
這篇文章主要介紹了JS?TypeScript的Map對象及聯(lián)合類型實(shí)戰(zhàn),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面 移動DIV
本篇文章主要介紹javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面,移動DIV。話不多說,附上代碼實(shí)例。需要的朋友來看下吧2016-12-12用Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
腳注(Footnote)是向用戶提供更多信息的一個最佳途徑,也是主體信息的一個有效補(bǔ)充,常見于各種印刷書籍中。2009-09-09javascript面向?qū)ο蟪绦蛟O(shè)計高級特性經(jīng)典教程(值得收藏)
這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計高級特性,結(jié)合實(shí)例形式詳細(xì)講述了javascript對象的創(chuàng)建,訪問,刪除,對象類型,擴(kuò)展等,需要的朋友可以參考下2016-05-05