商品抢购倒计时效果

最新推荐文章于 2022-10-14 23:11:42 发布
翻译最新推荐文章于 2022-10-14 23:11:42 发布
· 1.1k 阅读
前端js 专栏收录该内容
39 篇文章
订阅专栏
现在比较流行商品抢购活动，为了达到比较人性化的效果，通常有一个倒计时。
下面分享一个比较简陋的商品抢购倒计时效果。
代码实例如下:
     
     
      
      
       
       
        
         
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
            
              17 
             
            
              18 
             
            
              19 
             
            
              20 
             
            
              21 
             
            
              22 
             
            
              23 
             
            
              24 
             
            
              25 
             
            
              26 
             
            
              27 
             
            
              28 
             
            
              29 
             
            
              30 
             
            
              31 
             
            
              32 
             
            
              33 
             
            
              34 
             
            
              35 
             
            
              36 
             
            
              37 
             
            
              38 
             
            
              39 
             
            
              40 
             
            
              41 
             
             
              
              <!doctype html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              title 
              >商品抢购倒计时效果</ 
              title 
              > 
              
              
              < 
              style 
              > 
              
              
              #demo { 
              
              
                 
              text-align: center; 
              
              
                 
              color: red; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script  
              type 
              = 
              "text/javascript" 
              > 
              
              
              window.onload = function() { 
              
              
                 
              var demo = document.getElementById("demo"); 
              
              
                 
              var outTime = new Date("2016/12/12 12:00:00"); 
              
              
                 
              setInterval(fun, 1000); 
              
              
                 
              
              
                 
              function fun() { 
              
              
                   
              var newTime = new Date(); 
              
              
                   
              var ms = parseInt((outTime.getTime() - newTime.getTime()) / 1000); 
              
              
                   
              var d = parseInt(ms / 3600 / 24); // 
              
              
                   
              var h = parseInt(ms / 3600 % 24); 
              
              
                   
              var m = parseInt(ms / 60 % 60); 
              
              
                   
              var s = parseInt(ms % 60); 
              
              
                   
              d < 10 ? "d" + 0 : d; 
              
              
                 
              
              
                   
              h < 10 ? "h" + 0 : h; 
              
              
                   
              m < 10 ? "m" + 0 : m; 
              
              
                   
              s < 10 ? "s" + 0 : s; 
              
              
                 
              
              
                   
              demo.innerHTML = "距离抢购时间还有" + d + "天" + h + "时" + m + "分" + s + "秒"; 
              
              
                 
              } 
              
              
              } 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
                 
              < 
              div  
              id 
              = 
              "demo" 
              > 
              
              
                 
              </ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >