js 倒數計時器

1.JS倒數計時器

   經常在購網網站看到JS倒計時的東西,閒來無事自己也寫個!
   HTML代碼:
 <p>
     <span id="test" style=" display:block; font-size:20px; font-weight:700; color:#0F0;">距離晚會開始時間:</span>
 </p>
  JS代碼:
var timer;
var maxtime = 10000; //一個小時,按秒計算,自己調整!  
function CountDown(){   
    if(maxtime>=0){  
	time = formatMinutes(maxtime); 
	document.getElementById("test").innerHTML=time;   
	if(maxtime !=0){ 
		--maxtime;   
	}else{   
	    clearInterval(timer);   
	}   
    }  		
}

function formatMinutes(minutes){
    var day = parseInt(Math.floor(minutes / 86400));
    var hour = day >0? Math.floor((minutes - day*86400)/3600):Math.floor(minutes/3600); 
    var minute = hour > 0? Math.floor((minutes -day*86400 - hour*3600)/60):Math.floor(minutes/60);
    var second = minute > 0? Math.floor(minutes -day*86400 - hour*3600-minute*60):minutes;
    var time="";      
    if (day > 0) time += day + "天";
    if (hour > 0) time += hour + "小時";
    if (minute > 0) time += minute + "分鐘";
    time += second+"秒";
    time ="距離晚會結束還有:"+time;
    return time;
}
function dateFormate(currentTimeMillis){
	var d = new Date();
	 d.setTime(currentTimeMillis);
	// var str = d.Format("yyyy年MM月dd HH:mm:ss");
	 var str = d.Format("yyyy年MM月dd日 hh:mm:ss");
	document.getElementById("test1").innerHTML="轉換後的時間:"+str;  
}
$(document).ready(function(){
	timer = setInterval("CountDown()",1000);	
});
這段代碼實現倒計時,其中全局變量maxtime便是倒計時的時間點
前臺效果:


  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章