Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите с таймером отсчета времени (https://javascript.ru/forum/dom-window/26923-pomogite-s-tajjmerom-otscheta-vremeni.html)

dimentiy89 28.03.2012 00:38

Помогите с таймером отсчета времени
 
Добрый день форумчане, столкнулся с проблемой.
Мне нужен цикличный таймер обратного отсчета до заданного времени.
Допустим он должен считать каждый день сколько времени осталось до 20:00
пробовал ковырять скрипт:
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 
<title>Âû÷èñëåíèå âðåìåíè äî Íîâîãî ãîäà by HTML.BY team</title>
 
<script type="text/javascript">
<!--
function newYearIn()
{
    var days=" äíåé "
    var now = new Date();
    var newYear = new Date("Mar,31,2012,00:00:00");
    var totalRemains = (newYear.getTime()-now.getTime());
    if (totalRemains>1)
    {
        var RemainsSec=(parseInt(totalRemains/1000));
          var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
        if (
            RemainsFullDays==2 ||
            RemainsFullDays==3 ||
            RemainsFullDays==4 ||
            RemainsFullDays==22 ||
            RemainsFullDays==23 ||
            RemainsFullDays==24 ||
            RemainsFullDays==32 ||
            RemainsFullDays==33 ||
            RemainsFullDays==34
            ) {
            days=" äíÿ "
        }
        if (
            RemainsFullDays==1 ||
            RemainsFullDays==21 ||
            RemainsFullDays==31
            ) {
            days=" äåíü "
        }
          var secInLastDay=RemainsSec-RemainsFullDays*24*3600;
          var RemainsFullHours=(parseInt(secInLastDay/3600));
          if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours};
          var secInLastHour=secInLastDay-RemainsFullHours*3600;
          var RemainsMinutes=(parseInt(secInLastHour/60));
          if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes};
          var lastSec=secInLastHour-RemainsMinutes*60;
          if (lastSec<10){lastSec="0"+lastSec};
        var mcend = Date.parse("Jan 1, 2009, 00:00:00");
        var mcnow = now.getTime();
        var mc = ((mcend-mcnow)/10).toFixed(0).substr(8);
        document.getElementById('newyear').innerHTML = "Äî Íîâîãî Ãîäà îñòàëîñü: "+RemainsFullDays+days+RemainsFullHours+":"+RemainsMinutes+":"+lastSec+"."+mc;
          setTimeout("newYearIn()",10);
    }
      else {document.getElementById("newyear").innerHTML = "C ÍÎÂÛÌ ÃÎÄÎÌ !!!";}
}
//-->
</script>
 
</head>
 
<body onload="newYearIn();">
 
<span id="newyear"></span>

 
</body>
</html>



но ничего не получилось, на сайте detstvo.ru/ есть похожий таймер но у меня не получается его запустить, помогите пожалуйста.

tadjik1 28.03.2012 02:01

<!doctype html>
<html>
	<head>
		<script>
			setInterval(checkDate, 100);
			
			var targetDate = new Date('Mar,31,2012,00:00:00'),
					days = ['день', 'дня', 'дней'],
					hours = ['час', 'часа', 'часов'],
					minutes = ['минута', 'минуты', 'минут'],
					secondsArray = ['секунда', 'секунды', 'секунд'];
			
			function checkDate(){
				
				var now = new Date(),
					remainSeconds = parseInt((targetDate - now)/1000),
					remainDays = '',
					remainHours = '',
					remainMinutes = '';
					if (remainSeconds > 0){
						remainDays = parseInt(remainSeconds/(24*60*60));
						remainHours = parseInt((remainSeconds - remainDays*24*60*60)/(60*60));
						remainMinutes = parseInt((remainSeconds - remainDays*24*60*60 - remainHours*60*60)/(60));
						seconds = parseInt(remainSeconds - remainDays*24*60*60 - remainHours*60*60 - remainMinutes*60);
						document.getElementById('pasteIt').innerHTML = remainDays + ' ' + getNumEnding(remainDays, days) + ', ' + remainHours + ' ' + getNumEnding(remainHours, hours) + ', ' + remainMinutes +' ' + getNumEnding(remainMinutes, minutes) + ', ' + seconds + ' ' + getNumEnding(seconds, secondsArray);
					} else {
						document.getElementById('pasteIt').innerHTML = 'Вы всё проспали';
					}
			}
			
			function getNumEnding(iNumber, aEndings){
				var sEnding, i;
				iNumber = iNumber % 100;
				if (iNumber>=11 && iNumber<=19) {
						sEnding=aEndings[2];
				}
				else {
						i = iNumber % 10;
						switch (i) {
								case (1): sEnding = aEndings[0]; break;
								case (2):
								case (3):
								case (4): sEnding = aEndings[1]; break;
								default: sEnding = aEndings[2];
						}
				}
				return sEnding;
			}
			
		</script>
	</head>
	<body>
		<p>Осталось: <span id="pasteIt"></span></p>
	</body>
</html>

dimentiy89 28.03.2012 10:04

он же не так считает

Pavel M. 28.03.2012 17:34

можно так
<p id="timer"></p>

<script>
var outTimer = document.getElementById('timer'),
	dateEnd = (new Date()).setHours(20, 0, 0); // сегодня 20:00

setInterval(function () {
  var diff = Math.round((dateEnd - new Date()) / 1000), // разница
	  text = '';
  
  if (diff < 0) {
	text = 'Время вышло';
  } else {
	text = 'До 20:00 осталось ' + Math.floor(diff / 3600) + ' час. ' +  Math.floor(diff / 60) % 60 + ' мин.';
  }
  
  outTimer.innerHTML = text;
  
}, 1000);
</script>

dimentiy89 28.03.2012 20:03

этот работает не циклично, мне нужно чтобы он каждый день показывал сколько осталось времени до 20:00

Pavel M. 29.03.2012 07:29

т.е. в 20:01 он должен показывать, что осталось 23 часа 59 минут ?

tadjik1 29.03.2012 09:30

<!doctype html>
<html>
	<head>
		<script>
			setInterval(checkDate, 100);
			
			var	days = ['день', 'дня', 'дней'],
				hours = ['час', 'часа', 'часов'],
				minutes = ['минута', 'минуты', 'минут'],
				secondsArray = ['секунда', 'секунды', 'секунд'],
				month = ['January','February','March','April','May','June','July','August','September','October','November','December'];
			 
			function checkDate(){
					 
				var now = new Date(),
					targetDate = new Date(month[now.getMonth()] +','+ now.getHours() < 20 ? now.getDate() : now.getDate()+1) +',2012,20:00:00');
					remainSeconds = parseInt((targetDate - now)/1000),
					remainDays = '',
					remainHours = '',
					remainMinutes = '';
					if (remainSeconds > 0){
							remainDays = parseInt(remainSeconds/(24*60*60));
							remainHours = parseInt((remainSeconds - remainDays*24*60*60)/(60*60));
							remainMinutes = parseInt((remainSeconds - remainDays*24*60*60 - remainHours*60*60)/(60));
							seconds = parseInt(remainSeconds - remainDays*24*60*60 - remainHours*60*60 - remainMinutes*60);
							document.getElementById('pasteIt').innerHTML = remainDays + ' ' + getNumEnding(remainDays, days) + ', ' + remainHours + ' ' + getNumEnding(remainHours, hours) + ', ' + remainMinutes +' ' + getNumEnding(remainMinutes, minutes) + ', ' + seconds + ' ' + getNumEnding(seconds, secondsArray);
					} else {
							document.getElementById('pasteIt').innerHTML = 'Вы всё проспали';
					}
			}
			 
			function getNumEnding(iNumber, aEndings){
					var sEnding, i;
					iNumber = iNumber % 100;
					if (iNumber>=11 && iNumber<=19) {
									sEnding=aEndings[2];
					}
					else {
									i = iNumber % 10;
									switch (i) {
													case (1): sEnding = aEndings[0]; break;
													case (2):
													case (3):
													case (4): sEnding = aEndings[1]; break;
													default: sEnding = aEndings[2];
									}
					}
					return sEnding;
			}
				 
		</script>
	</head>
    <body>
        <p>Осталось: <span id="pasteIt"></span></p>
    </body>
</html>

Pavel M. 29.03.2012 11:29

Цитата:

Сообщение от dimentiy89 (Сообщение 165422)
этот работает не циклично, мне нужно чтобы он каждый день показывал сколько осталось времени до 20:00

можно так
<p id="timer"></p>

<script>
var outTimer = document.getElementById('timer'), 
	secEnd = 20 * 3600, // секунд до 20:00
	serDay = 24 * 3600; // секунд в сутках

setInterval(function () {
  
  var curDate = new Date(),
	  curSec = curDate.getHours() * 3600 + curDate.getMinutes() * 60 + curDate.getSeconds(), // прошло секунд в этих сутках
	  diff = secEnd - curSec;
  
  if (diff < 0) { // если сейчас больше 20:00 
	diff = serDay + diff; // разница с сек. в сутках
  }

  outTimer.innerHTML = 'До 20:00 осталось ' + Math.floor(diff / 3600) + ' час. ' +  Math.floor(diff / 60) % 60 + ' мин.';
  
}, 1000);
</script>

dimentiy89 29.03.2012 20:51

спасибо огромное всем отозвавшимся! Всё работает!

trikadin 30.03.2012 00:17

dimentiy89, пользуйтесь поиском по форуму перед тем, как задавать вопросы.


Часовой пояс GMT +3, время: 03:17.