js制作倒计时

最新推荐文章于 2023-04-01 16:29:22 发布

悠悠我心cium

最新推荐文章于 2023-04-01 16:29:22 发布

阅读量181

点赞数

分类专栏： js 文章标签： javascript

原文链接：https://blog.csdn.net/zz18435842675/article/details/92830026

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需求

最近由于页面需要，做一个倒计时的功能，具体意思就是当前时间到指定时间之间的时间段以倒计时的方式展示

展示效果

效果图

涉及方法

getTime();
innerHTML;
Math.floor();
setTimeout(函数，time);

代码


 
 
   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head>
    
    
   
   

   
   
    
    
   
   
   
   
    
      
     
     <meta charset="utf-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
      
     
     <title>JS倒计时
     
     </title>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
          
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <div id="remainDays">
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script type="text/javascript" >
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.οnlοad=countdown;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     function countdown(){
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //获取客户端时间
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var today=
     
     new 
     
     Date();
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //获取服务器当前时间 var today=new Date($.ajax({type:"HEAD",async:false,cache:false}).getResponseHeader("Date"));
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //当前距离1970年的毫秒数
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var oldTime = today.getTime();
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //设置截止时间，比如此时设置的是2099/1/1/00:00:00，此处可做修改
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var newDate = 
     
     new 
     
     Date(
     
     2099,
     
     0,
     
     1,
     
     0,
     
     0,
     
     0); 
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //截止时间距离1970年的毫秒数
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var newTime = newDate.getTime();
    
    
   
   

   
   
    
    
   
   
   
   
    
        
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //截止时间距离现在的秒数
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var second = 
     
     Math.floor((newTime - oldTime) / 
     
     1000);
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //设置remainSecond的目的是：如果倒计时结束该执行的方法或事件
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var remainSecond = second;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     //86400代表的是天；一天有24*60*60=86400秒 ；
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var day = 
     
     Math.floor(second / 
     
     86400);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         second %= 
     
     86400;
     
     //余数代表剩下的秒数；
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var hour = 
     
     Math.floor(second / 
     
     3600);
     
     //3600代表小时；
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         second %= 
     
     3600; 
     
     //余数代表 剩下的秒数；
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var minute = 
     
     Math.floor(second / 
     
     60);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         second %= 
     
     60;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var str = formatType(day) + 
     
     '<span class="time">天</span>'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             + formatType(hour) + 
     
     '<span class="time">小时</span>'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             + formatType(minute) + 
     
     '<span class="time">分钟</span>'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             + formatType(second) + 
     
     '<span class="time">秒</span>';
    
    
   
   

   
   
    
    
   
   
   
   
    
    	    
     
     if(remainSecond >
     
     0){
    
    
   
   

   
   
    
    
   
   
   
   
    
    	    	
     
     document.getElementById(
     
     "remainDays").innerHTML=(
     
     "倒计时：<font color=red>"+str+
     
     "</font>");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	    }
     
     else{
    
    
   
   

   
   
    
    
   
   
   
   
    
    	    	
     
     //设置你的事件或者函数
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	    }
    
    
   
   

   
   
    
    
   
   
   
   
    
       		
     
     //500的目的是防止漏掉执行
    
    
   
   

   
   
    
    
   
   
   
   
    
    	    
     
     setTimeout(countdown,
     
     500);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //设置显示格式，小于10的填0
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     function formatType(n) {
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     return n >= 
     
     0 && n < 
     
     10 ? 
     
     '0' + n : 
     
     '' + n;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
       }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>

在线运行效果请点此处

悠悠我心cium

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js制作倒计时

需求最近由于页面需要，做一个倒计时的功能，具体意思就是当前时间到指定时间之间的时间段以倒计时的方式展示展示效果涉及方法 getTime(); innerHTML;  Math.floor(); setTimeout(函数，time);代码<!DOCTYPE html><html><head> <meta charset="utf...
复制链接

扫一扫