Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2014, 21:24
Новичок на форуме
Отправить личное сообщение для voron1990 Посмотреть профиль Найти все сообщения от voron1990
 
Регистрация: 15.09.2014
Сообщений: 5

Счетчик обратного отсчета устоновка на заданное время.
Ребят выручайте.
Помогите пожалуйста, что следует изменить или дописать в коде, что-бы счетчик вел отсчет до 8 вечера и начинал заново. То есть ежедневно вел отсчет до 8 вечера. Заранее признателен за помощь. Спасибо.

Код индекс
<!-- Our CSS stylesheet file -->
<p><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" /> <link rel="stylesheet" href="assets/css/styles.css" /> <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" /></p>
<!--[if lt IE 9]>          </script>        <![endif]-->
<div id="countdown">&nbsp;</div>
<table border="0" style="width: 100%; height: 100%;">
<tbody>
<tr>
<td align="center" width="27%" height="5">&nbsp;</td>
<td align="center" width="17%" height="5"><span style="font-size: 1em; font-family: Roboto, helvetica, sans-serif; color: #c0c0c0;">ЧАСОВ</span></td>
<td align="center" width="15%"><span style="font-size: 1em; font-family: Roboto, helvetica, sans-serif; color: #c0c0c0;">МИНУТ</span></td>
<td align="center" width="15%"><span style="font-size: 1em; font-family: Roboto, helvetica, sans-serif; color: #c0c0c0;">СЕКУНД</span></td>
<td align="center">&nbsp;</td>
</tr>
</tbody>
</table>
<!-- JavaScript includes -->
<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
// ]]></script>
<script src="assets/countdown/jquery.countdown.js" type="text/javascript"></script>
<script src="assets/js/script.js" type="text/javascript"></script>
<p><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" /> <link rel="stylesheet" href="assets/css/styles.css" /> <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" /></p>


код jquery.countdown.js
/**
 * @name		jQuery Countdown Plugin
 * @author		Martin Angelov
 * @version 	1.0
 * @url			[url]http://tutorialzine.com/2011/12/countdown-jquery/[/url]
 * @license		MIT License
 */

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

		// Initialize the plugin
		init(this, options);
		
		positions = this.find('.position');
		
		(function tick(){
			
			// Time left
			left = Math.floor((options.timestamp - (new Date())) / 1000);
			
			if(left < 0){
				left = 0;
			}
			
			// Number of days left
			d = Math.floor(left / days);
			updateDuo(0, 1, d);
			left -= d*days;
			
			// Number of hours left
			h = Math.floor(left / hours);
			updateDuo(2, 3, h);
			left -= h*hours;
			
			// Number of minutes left
			m = Math.floor(left / minutes);
			updateDuo(4, 5, m);
			left -= m*minutes;
			
			// Number of seconds left
			s = left;
			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);


код script.js
jQuery(function(){
	
	var note = jQuery('#note'),
		ts = new Date(2012, 0, 1),
		newYear = true;
	
	if((new Date()) > ts){
		var t = new Date();
        var beforeTommorow = (19-t.getHours())*60*60*1000+(60-t.getMinutes())*60*1000+(60-t.getSeconds())*1000;
        ts = (new Date()).getTime() + beforeTommorow;
        newYear = false;
	}
		
	jQuery('#countdown').countdown({
		timestamp	: ts,
		callback	: function(days, hours, minutes, seconds){
			
			var message = "";
			
			message += days + " day" + ( days==1 ? '':'s' ) + ", ";
			message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
			message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
			message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
			
			if(newYear){
				message += "left until the new year!";
			}
			else {
				message += "left to 10 days from now!";
			}
			
			note.html(message);
		}
	});
	
});

Последний раз редактировалось voron1990, 16.09.2014 в 00:54.
Ответить с цитированием
  #2 (permalink)  
Старый 16.09.2014, 20:19
Новичок на форуме
Отправить личное сообщение для voron1990 Посмотреть профиль Найти все сообщения от voron1990
 
Регистрация: 15.09.2014
Сообщений: 5

Ребят ищу решение уже 3 день. Помогите кто может.
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2014, 22:40
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 456

voron1990,

script.js
$(function(){
	$('#countdown').countdown();
});

jquery.countdown.js (строки 36-38)
if(left < 0){
	left = 0;
	var d = new Date();
	options.timestamp = (d.getHours() < 20) ? d.setHours(20,0,0,0) : d.setHours(44,0,0,0);
}
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2014, 22:59
Новичок на форуме
Отправить личное сообщение для voron1990 Посмотреть профиль Найти все сообщения от voron1990
 
Регистрация: 15.09.2014
Сообщений: 5

спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Счетчик обратного отсчета для сайта. Подскажите. ProstoVova Общие вопросы Javascript 2 12.04.2014 17:15
#help Таймер обратного отсчета и куки poroxprod Общие вопросы Javascript 0 11.04.2014 14:46
Счетчик обратного отсчета Deymos Элементы интерфейса 2 27.01.2014 16:10
Счетчик обратного отсчета с ежедневным рестартом Илья1982 Общие вопросы Javascript 3 24.11.2013 12:24
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 15:39