JS倒数计时器

来源：互联网发布：c语言逻辑表达式符号编辑：程序博客网时间：2024/05/22 05:29

1.JS倒数计时器

HTML代码：

[html] view plain copy
 print?
<p>  
   <span id="test" style=" display:block; font-size:20px; font-weight:700; color:#0F0;">距离晚会开始时间:</span>  
</p>  

JS代码：

[javascript] view plain copy
 print?
var timer;  
var maxtime = 3600; //一个小时，按秒计算，自己调整!    
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(){  
    //dateFormate('1392818810270');  
    timer = setInterval("CountDown()",1000);      
});  

上述代码中，调用setInterval计时器，每个1000毫秒调用一次CountDown()函数，在CountDown实现每隔一秒减少一秒钟，从而实现
到数计时器，全局变量maxtime标示倒计时的时间点，需要转换为秒数！
前台效果为：

ps:

[javascript] view plain copy
 print?
var begindate=new Date();//开始日期  
var enddate=new Date('2014', '1', '25','16','10','30');//结束日期  
var maxtime = Math.round((enddate.getTime() - begindate.getTime())/1000);  

上面这两句代码，可以得到两个时间点之间的秒数，用于倒计时

[javascript] view plain copy
 print?
<pre code_snippet_id="203581" snippet_file_name="blog_20140225_4_2669013" name="code" class="javascript"></pre><pre code_snippet_id="203581" snippet_file_name="blog_20140225_12_6138524" name="code" class="javascript"></pre><pre code_snippet_id="203581" snippet_file_name="blog_20140225_12_6138524" name="code" class="javascript"></pre><pre code_snippet_id="203581" snippet_file_name="blog_20140225_12_6138524" name="code" class="javascript"></pre><pre code_snippet_id="203581" snippet_file_name="blog_20140225_12_6138524" name="code" class="javascript"></pre><pre code_snippet_id="203581" snippet_file_name="blog_20140225_12_6138524" name="code" class="javascript"></pre>  

0 0