一个页面多个倒计时 js

最新推荐文章于 2023-05-31 15:05:18 发布
最新推荐文章于 2023-05-31 15:05:18 发布
阅读量388 收藏
点赞数
文章标签： javascript ViewUI

jQuery倒计时（CountDown）小插件

jquery countdown

可以用于一个页面多个倒计时，调用也非常方便。

 

  1. /*
  2. jquery.countdown.js
  3. */
  4.  (function($){ 
  5.   var countdown = function(item, config) 
  6.   { 
  7.   var seconds = parseInt($(item).attr(config.attribute)); 
  8.   var timer = null; 
  9.   var doWork = function() 
  10.   { 
  11.   if(seconds >= 0) 
  12.   { 
  13.   if(typeof(config.callback) == "function") 
  14.   { 
  15.   var data = { 
  16.   total : seconds , 
  17.   second : Math.floor(seconds % 60) , 
  18.   minute : Math.floor((seconds / 60) % 60) , 
  19.   hour : Math.floor((seconds / 3600) % 24) , 
  20.   day : Math.floor(seconds / 86400) 
  21.   }; 
  22.   config.callback.call(item, seconds, data, item); 
  23.   } 
  24.   seconds --; 
  25.   }else{ 
  26.   window.clearInterval(timer); 
  27.   } 
  28.   } 
  29.   timer = window.setInterval(doWork, 1000); 
  30.   doWork(); 
  31.   }; 
  32.   var main = function() 
  33.   { 
  34.   var args = arguments; 
  35.   var config = { attribute : 'data-seconds', callback : null }; 
  36.   if(args.length == 1) 
  37.   { 
  38.   if(typeof(args[0]) == "function") config.callback = args[0]; 
  39.   if(typeof(args[0]) == "object") $.extend(config, args[0]); 
  40.   }else{ 
  41.   config.attribute = args[0]; 
  42.   config.callback = args[1]; 
  43.   } 
  44.   $(this).each(function(index, item){ 
  45.   countdown.call(item, item, config); 
  46.   }); 
  47.   }; 
  48.   $.fn.countdown = main; 
  49.  })(jQuery); 
 

 使用实例：
 

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5.  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  6.  <script type="text/javascript" src="jquery.countdown.js"></script> 
  7. </head>
  8. <body>
  9.  <script type="text/javascript"> 
  10.  $(function(){ 
  11.   $('ul').countdown(function(s, d){ 
  12.   var items = $(this).find('span'); 
  13.   items.eq(0).text(d.total); 
  14.   items.eq(1).text(d.second); 
  15.   items.eq(2).text(d.minute); 
  16.   items.eq(3).text(d.hour); 
  17.   items.eq(4).text(d.day); 
  18.   }); 
  19. });
  20. </script>
  21.  <ul data-seconds="3344">  //值3344 为总共的秒数 
  22.   <li>总共<span>-</span>秒</li> 
  23.   <li><span>-</span>秒</li> 
  24.   <li><span>-</span>分</li> 
  25.   <li><span>-</span>时</li> 
  26.   <li><span>-</span>天</li> 
  27. </ul>
  28.  <ul data-seconds="97545"> 
  29.   <li>总共<span>-</span>秒</li> 
  30.   <li><span>-</span>秒</li> 
  31.   <li><span>-</span>分</li> 
  32.   <li><span>-</span>时</li> 
  33.   <li><span>-</span>天</li> 
  34. </ul>
  35.  <ul data-seconds="10"> 
  36.   <li>总共<span>-</span>秒</li> 
  37.   <li><span>-</span>秒</li> 
  38.   <li><span>-</span>分</li> 
  39. </ul>
  40. </body>
  41. </html>
 

 

 


  基本上我们从jquery上现在有这个 
 jquery.countdown.js 名字是一样的，但是我看里面的内容是不一样的。因而我用的是以上代码。 （至于从官网上下载的jquery.countdown.js是否能用。本人试的时候确实是不行。直接用以上代码即可实现一个页面多个倒计时。） 


                

        

        




    




    

      

        

            

              
                
                  iteye_8029
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
JS一个页面多个倒计时

				
			

			

				

					10-17
				

			

		

		

			
				
H5网页，实现一个页面多个倒计时功能，类似于淘宝或者京东页面活动倒计时功能秒杀商品

			
		

	



                

              
                



	

		

			

				
					
js+jsp页面，用定时器实现多个倒计时

				
			

			

				

					Amor_1998的博客
				

				

					10-10
					
					858
					
				

			

		

		

			
				
【代码】js+jsp页面，用定时器实现多个倒计时。

			
		

	



                


  
              

                


	

		

			

				
					
jquery/js实现一个网页同时调用多个倒计时(最新的)

					
热门推荐

				
			

			

				

					Websites
				

				

					11-25
					
					61万+
					
				

			

		

		

			
				
jquery/js实现一个网页同时调用多个倒计时(最新的)

最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!



//js


//js2
var plugJs={
 stamp:0,
 tid:1,
 stampnow:Date.parse(new Date())/1000,//统一开始时间戳
 ...

			
		

	





	

		

			

				
					
js实现一个页面多个秒杀倒计时

					
最新发布

				
			

			

				

					monster
				

				

					05-31
					
					331
					
				

			

		

		

			
				
js实现秒杀倒计时

			
		

	



		

			
		



	

		

			

				
					
JS实现倒计时(一个页面多个倒计时)

				
			

			

				

					lyna的博客
				

				

					08-23
					
					3502
					
				

			

		

		

			
				

&lt;span&gt;
    &lt;i class="day-countdown" id="{$p.id}" data-timestamp="{$p.end_time}"&gt;00天00:00:00&lt;/i&gt;后        
    过期
&lt;/span&gt;
&lt;!-- $p.id:后台传来的唯一号
     $p.end_time:后台传来的

			
		

	





	

		

			

				
					
【JS】两种计时器/定时器

				
			

			

				

					weixin_33805992的博客
				

				

					09-08
					
					178
					
				

			

		

		

			
				
1.首先介绍定时器　　定时器：设置一个定时器，再设置一个等待的时间，到达指定时间后，执行对应的操作　　两种定时器：用法一样,区别一个执行后不会停下来，一个只执行一次
　　　　第一种：window.setInterval([function],[interval]);　　　　　　/*设置一个定时器，到达指定时间[interval] 执行我们的操作[function],然后定时器并没有停止，以后每隔...

			
		

	





	

		

			

				
					
同一页面多个商品倒计时JS 基于面向对象的javascript

				
			

			

				

					10-28
				

			

		

		

			
				
同一页面多个商品倒计时JS 基于面向对象的javascript实现代码，需要的朋友可以参考下

			
		

	





	

		

			

				
					
js实现一个页面多个倒计时的3种方法

				
			

			

				

					10-17
				

			

		

		

			
				
主要为大家详细介绍了js实现一个页面多个倒计时的3种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
JS/jquery实现一个网页内同时调用多个倒计时的方法

				
			

			

				

					10-19
				

			

		

		

			
				
主要介绍了JS/jquery实现一个网页内同时调用多个倒计时的方法,涉及js与jQuery基于定时器的时间相关操作技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
js实现网页同时进行多个倒计时功能

				
			

			

				

					10-17
				

			

		

		

			
				
主要为大家详细介绍了js实现网页同时进行多个倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
同一页面多个倒计时js

				
			

			

				

					11-27
				

			

		

		

			
				
在一个页面多个倒计时，多个时间的倒计时。一个js控制多个时间

			
		

	





	

		

			

				
					
js实现页面的多个日期时间倒计时效果（多个拼团）

				
			

			

				

					08-12
				

			

		

		

			
				
js的日期倒计时在日常项目中还是比较常用的，活动、拼团功能最为常见；
先分析最要是处理好日期函数，然后一个页面上有多个倒计时情况下的方法；

			
		

	





	

		

			

				
					
js倒记时计码，同一页面多个倒计时

				
			

			

				

					02-16
				

			

		

		

			
				
js倒记时计码，同一页面多个倒计时
特别好用
只需要要改一下p和div的ID称即可用。隐藏div的数字为倒计时的秒数

			
		

	





	

		

			

				
					
同一页面创建多个定时器

				
			

			

				

					MengHuanLanSe的博客
				

				

					07-13
					
					1229
					
				

			

		

		

			
				
在一个网页中同时创建多个定时器实现不同任务的倒计时功能，定时器倒计时时间到达之后需要将定时器清除，否则就会新创建的定时器就会受到干扰，代码如下，

			
		

	





	

		

			

				
					
前端---js（自学笔记28)（定时调用）以及定时练习图片自动切换、延时调用

				
			

			

				

					ABU_MOlI_ITUI的博客
				

				

					11-17
					
					417
					
				

			

		

		

			
				
定时调用：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取count
				var count = document.getElementById("cou

			
		

	





	

		

			

				
					
js实现，同一页面多个倒计时

				
			

			

				

					良_123的专栏
				

				

					12-29
					
					4959
					
				

			

		

		

			
				
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  &lt;html xmlns=" http://www.w3.org/1999/xhtml"&gt;  &lt;head&gt;      ..

			
		

	





	

		

			

				
					
js 多个定时器_系统性学习 Node.js（1）- Node.js 基础概念

				
			

			

				

					weixin_39781143的博客
				

				

					11-28
					
					105
					
				

			

		

		

			
				
前言现在 Node.js 对于前端越来越重要，笔者现在也感受到了学好 Node.js 可以极大的提升前端竞争力。之前也或多或少的接触过，但是没有一个系统的学习过程，所以笔者接下来打算系统的去学习 Node.js，同时希望记录一下自己从零到一的学习过程。希望我的学习经验可以帮助到大家。Node.js 是什么都 2020 年了，大家对 Node 肯定都有了初步的了解，但是我还是想先介绍一下什么是 No...

			
		

	





	

		

			

				
					
JS 前端同时设置多个定时器

				
			

			

				

					Doooer的博客
				

				

					07-23
					
					5101
					
				

			

		

		

			
				
time = 10;  //前端显示的倒计时时间
pageTimer = {};  // 计时器数组
timerNumber = 0;  // 计时器id



// 显示倒计时，点击触发倒计时：
start() {
  this.time = 10;
  this.pageTimer[this.timerNumber] = setInterval(() => {
    this.countDown();
  }, 1000);
  this.timerNumber = this.timerNum.

			
		

	





	

		

			

				
					
html做一个倒计时页面,JS实现同一个html页面多个倒计时

				
			

			

				

					05-16
				

			

		

		

			
				
首先，我们需要在HTML中创建一个倒计时的容器，例如：  ```html <div class="countdown" data-time="2022-01-01 00:00:00"></div> ```  其中，`data-time` 属性表示倒计时的截止时间。  接下来，我们需要编写一个...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值