js倒計時搶購實例
更新時間：2015年12月20日 10:23:02 投稿：lijiao
這篇文章主要介紹了js倒計時簡單實現(xiàn)方法，方便一些提示重要日期的來臨，本實例特別適合用于商品倒計時搶購活動，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xià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)文章
今天小編就為大家分享一篇Layui表格監(jiān)聽行單雙擊事件講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
bootstrap配合Masonry插件實現(xiàn)瀑布式布局
這篇文章主要為大家詳細(xì)介紹了bootstrap配合Masonry插件實現(xiàn)瀑布式布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript?Promise執(zhí)行流程深刻理解
這篇文章主要介紹了JavaScript?Promise執(zhí)行流程深刻理解，他是一個構(gòu)造函數(shù)，每個創(chuàng)建的promise都有各自狀態(tài)和值，且狀態(tài)初始值為pending，值為undefined2022-06-06
JS+CSS實現(xiàn)TreeMenu二級樹形菜單完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)TreeMenu二級樹形菜單,以完整實例形式較為詳細(xì)的分析了JS二級樹形菜單的節(jié)點元素操作技巧,非常簡單實用,需要的朋友可以參考下2015-09-09
本文主要介紹了javaScript的基礎(chǔ)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
javascript iframe編程相關(guān)代碼，對于熟練操作iframe的朋友有很大的幫助。2009-12-12
javascript讀取xml實現(xiàn)javascript分頁
這篇文章主要介紹了javascript讀取xml數(shù)據(jù)對其實現(xiàn)javascript分頁效果，大家參考使用吧2013-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序版翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
JS雙向鏈表實現(xiàn)與使用方法示例(增加一個previous屬性實現(xiàn))
這篇文章主要介紹了JS雙向鏈表實現(xiàn)與使用方法,在之前鏈表的基礎(chǔ)上增加一個previous屬性實現(xiàn)的雙向鏈表功能,需要的朋友可以參考下
2019-01-01