30秒后如何使计数器停止并重新启动 [英] How to make the counter stop and restart after 30 seconds

问题描述

嗨
如何更改计数器，当计数器达到30秒时，他将停止并再次开始计数。

这是脚本：

（ function （$）{
 
  //  每个时间段的秒数 
  var 天= 24 * 60 * 60，
小时= 60 * 60，
分钟=  60 ; 
 
  //  创建插件 
 $ .fn.countup = 功能 （prop）{
 
  var  options = $ .extend（{
 callback：函数（）{}，
 start： new  日期（）
}，prop）; 
 
  var 传递=  0 ，d，h，m，s，
位置; 
 
  //  初始化插件 
 init（此，options）; 
 
 positions =  this  .find（' 位置'）; 
 
（ function  tick（）{
 
 pass =  Math .floor((< span class =code-keyword> new   Date （） -  options.start）/  1000 ）; 
 
  //  通过的天数 
d = 数学 .floor（通过/天）; 
 updateDuo（ 0 ， 1 ，d）; 
通过 -  = d *天; 
 
  //  剩余小时数 
h = 数学 .floor（通过） /小时）; 
 updateDuo（ 2 ， 3 ，h）; 
通过 -  = h *小时; 
 
  //  剩余分钟数 
 m = 数学 .floor（通过/分钟）; 
 updateDuo（ 4 ， 5 ，m）; 
通过 -  = m *分钟; 
 
  //  剩余秒数 
 s =已通过; 
 updateDuo（ 6 ， 7 ，s）; 
 
  //  调用可选用户提供的回调 
选项。回调（d，h，m，s）; 
 
  //  在1s内安排此功能的另一次调用 
 setTimeout（tick， 1000 ）; 
}）（）; 
 
  //  此功能一次更新两位数字 
  function  updateDuo（minor，major，value）{
 switchDigit（positions.eq（minor）， Math  .floor（值/ 10）％10）; 
 switchDigit（positions.eq（major），value％10）; 
} 
 
 返回 此; 
}; 
 
 
  function  init（elem，options）{
 elem.addClass（'  countdownHolder'）; 
 
  //  在容器内创建标记 
 $。 each（['  Days'，'  Hours'，'  Minutes'，< span class =code-string>'  Seconds']， function （i） {
 $（' < span class =count' + this +  >'）。html（
 ' < span class =position> \ 
< span class =digit static> 0< / span> \ 
 < / span> \ 
< span class =position> \ 
< span class =digit static> 0< / span> \ 
< ;/笔直t;' 
）.appendTo（elem）; 
 
  if （this！=  秒）{
 elem.append（' < span class =countDiv countDiv' + i + ' >< / span>'）; 
} 
}）; 
 
} 
 
  //  在两者之间创建一个动画过渡数字 
  function  switchDigit（position，number）{
 
  var  digit = position.find（'  .digital'）
 
  if （digit.is（' ：animated'））{
  return   false ; 
} 
 
  if （position.data（'  digit'）== number）{
  //  我们已经显示此号码 
 返回  false ; 
} 
 
 position.data（'  digit'，数字）; 
 
  var  replacement = $（' < span>'，{
 '  class'：< span class =code-string>'  digit'，
 css：{
 top：'   -  2.1em'，
 opacity： 0  
}，
 html：number 
}）; 
 
  //  动画时添加.static类 
  //  完成。这使它运行更顺畅。 
 
数字
 .before（替换）
 .removeClass（'  static'）
 .animate（{top：'  2.5em'，不透明度： 0 }，'  fast'， function （）{
 digit.remove（）; 
}）
 
替换
 .delay（ 100 ）
 .animate（{top： 0 ，opacity： 1 }，'  fast'， function （）{
 replacement.addClass（'  static'）; 
}）; 
} 
}）（jQuery）; 

我的尝试：



我尝试广告，如果功能，但我不知道在哪里放，如果或在哪里是我可以添加停止或重置代码

解决方案

）{

// 每个时间段的秒数
var 天= 24 * 60 * 60，
小时= 60 * 60，
分钟= 60 ;

// 创建插件

< blockquote> .fn.countup = function （prop）{

var options =

.extend（{
callback： function （）{}，
start： new Date （）
}，prop）;

var 传递= 0 ，d，h，m，s，
仓位;

// 初始化插件
init（此，options）;

positions = this .find（' 位置'）;

（ function tick（）{

pass = Math .floor((< span class =code-keyword> new Date （） - options.start）/ 1000 ）;

// 通过的天数
d = 数学 .floor（通过/天）;
updateDuo（ 0 ， 1 ，d）;
通过 - = d *天;

// 剩余小时数
h = 数学 .floor（通过） /小时）;
updateDuo（ 2 ， 3 ，h）;
通过 - = h *小时;

// 剩余分钟数
m = 数学 .floor（通过/分钟）;
updateDuo（ 4 ， 5 ，m）;
通过 - = m *分钟;

// 剩余秒数
s =已通过;
updateDuo（ 6 ， 7 ，s）;

// 调用可选用户提供的回调
选项。回调（d，h，m，s）;

// 在1s内安排此功能的另一次调用
setTimeout（tick， 1000 ）;
}）（）;

// 此功能一次更新两位数字
function updateDuo（minor，major，value）{
switchDigit（positions.eq（minor）， Math .floor（值/ 10）％10）;
switchDigit（positions.eq（major），value％10）;
}

返回 此;
};


function init（elem，options）{
elem.addClass（' countdownHolder'）;

// 在容器内创建标记

Hi How can I change the code that when the counter get to 30 seconds he will stop and start the count again.
This is the script:

(function($){
	
	// Number of seconds in every time division
	var days	= 24*60*60,
		hours	= 60*60,
		minutes	= 60;
	
	// Creating the plugin
	$.fn.countup = function(prop){
		
		var options = $.extend({
			callback	: function(){},
			start		: new Date()
		},prop);
		
		var passed = 0, d, h, m, s, 
			positions;

		// Initialize the plugin
		init(this, options);
		
		positions = this.find('.position');
		
		(function tick(){
			
			passed = Math.floor((new Date() - options.start) / 1000);
			
			// Number of days passed
			d = Math.floor(passed / days);
			updateDuo(0, 1, d);
			passed -= d*days;
			
			// Number of hours left
			h = Math.floor(passed / hours);
			updateDuo(2, 3, h);
			passed -= h*hours;
			
			// Number of minutes left
			m = Math.floor(passed / minutes);
			updateDuo(4, 5, m);
			passed -= m*minutes;
			
			// Number of seconds left
			s = passed;
			updateDuo(6, 7, s);
			
			// Calling an optional user supplied callback
			options.callback(d, h, m, s);
			
			// Scheduling another call of this function in 1s
			setTimeout(tick, 1000);
		})();
		
		// This function updates two digit positions at once
		function updateDuo(minor,major,value){
			switchDigit(positions.eq(minor),Math.floor(value/10)%10);
			switchDigit(positions.eq(major),value%10);
		}
		
		return this;
	};


	function init(elem, options){
		elem.addClass('countdownHolder');

		// Creating the markup inside the container
		$.each(['Days','Hours','Minutes','Seconds'],function(i){
			$('<span class="count'+this+'">').html(
				'<span class="position">\
					<span class="digit static">0</span>\
				</span>\
				<span class="position">\
					<span class="digit static">0</span>\
				</span>'
			).appendTo(elem);
			
			if(this!="Seconds"){
				elem.append('<span class="countDiv countDiv'+i+'"></span>');
			}
		});

	}

	// Creates an animated transition between the two numbers
	function switchDigit(position,number){
		
		var digit = position.find('.digit')
		
		if(digit.is(':animated')){
			return false;
		}
		
		if(position.data('digit') == number){
			// We are already showing this number
			return false;
		}
		
		position.data('digit', number);
		
		var replacement = $('<span>',{
			'class':'digit',
			css:{
				top:'-2.1em',
				opacity:0
			},
			html:number
		});
		
		// The .static class is added when the animation
		// completes. This makes it run smoother.
		
		digit
			.before(replacement)
			.removeClass('static')
			.animate({top:'2.5em',opacity:0},'fast',function(){
				digit.remove();
			})

		replacement
			.delay(100)
			.animate({top:0,opacity:1},'fast',function(){
				replacement.addClass('static');
			});
	}
})(jQuery);

What I have tried:

I tried to ad if function but I don't know where to put if or where is the function that I can add stop or reset to the code

解决方案

){ // Number of seconds in every time division var days = 24*60*60, hours = 60*60, minutes = 60; // Creating the plugin

.fn.countup = function(prop){ var options =

.extend({ callback : function(){}, start : new Date() },prop); var passed = 0, d, h, m, s, positions; // Initialize the plugin init(this, options); positions = this.find('.position'); (function tick(){ passed = Math.floor((new Date() - options.start) / 1000); // Number of days passed d = Math.floor(passed / days); updateDuo(0, 1, d); passed -= d*days; // Number of hours left h = Math.floor(passed / hours); updateDuo(2, 3, h); passed -= h*hours; // Number of minutes left m = Math.floor(passed / minutes); updateDuo(4, 5, m); passed -= m*minutes; // Number of seconds left s = passed; updateDuo(6, 7, s); // Calling an optional user supplied callback options.callback(d, h, m, s); // Scheduling another call of this function in 1s setTimeout(tick, 1000); })(); // This function updates two digit positions at once function updateDuo(minor,major,value){ switchDigit(positions.eq(minor),Math.floor(value/10)%10); switchDigit(positions.eq(major),value%10); } return this; }; function init(elem, options){ elem.addClass('countdownHolder'); // Creating the markup inside the container

这篇关于30秒后如何使计数器停止并重新启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！