溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js實現時間倒計時展示的具體代碼，供大家參考，具體內容如下
這里使用的是Date日期類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期類倒計時</title>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("time");
var obtn=document.getElementById("btn");
var omusic=document.getElementById("music");
obtn.onclick=function(){//按鈕點擊 音樂停止播放
omusic.pause();
}
function totwo(e){
return e<10?"0"+e:""+e;//如果取得的數字為個數則在其前面增添一個0
}
function go(){//把獲取時間的功能封裝到函數內 注意 時間要向下取整避免小數
var time1=new Date();//獲取當前時間 獲取的市1970年1年1月日到現在的毫秒數(必須寫在函數或者定時器內 每一次變化都要重新獲取當前時間)
var time2=new Date(2017,9,27,17,20,10);//設置需要到達的時間 也是獲取的毫秒數
var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//獲得差值除以1000轉為秒
var day=totwo(Math.floor(conS/86400));// 差值/60/60/24獲取天數
var hour=totwo(Math.floor(conS%86400/3600)); // 取余/60/60獲取時(取余是獲取conS對應位置的小數位)
var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60獲取分
var s=totwo(Math.floor(conS%60)); //取總秒數的余數
var html="倒計時"+day+"天"+hour+"時"+min+"分"+s+"秒";
odiv.innerHTML=html;//把字符串添加進div中
if(conS<0){//倒計時完成 執行功能，這里是播放MP3
clearInterval(time);//執行功能時要清除時間函數
omusic.play();
odiv.innerHTML="春節快樂！";
}
}
go();//調用函數
var time=setInterval(go,1000);//設置定時器 每一秒執行一次
}
</script>
</head>
<body>
<button id="btn">停止</button>
<audio src="music.mp3" id="music"></audio>
<div id="time"></div>
</body>
</html>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
