jQuery тимер минути

[kWo_2]

Как мога да направя малко таймерче, в което да вървят минути

примерно имам зададена минута като начало и секунда (1:31 или 131 за по лесно) и от там на всеки 60 секунди да добавя + 1 минута към таймера

<span class="" id="131">55</span>

 

[fenixpz]

Здравей!
Надявам се това да ти свърши работа:

               var m = 0;
		var s = 0;
		function clock() {
			document.getElementById('clock').innerHTML = m + ':' + s;
			s++;
			if(s > 59) {
				m += 1;
				s = 0;
			}	
			var t = setTimeout('clock()', 1000);
		}

Скрипта е доста прост. Задаваме минути и секунди съответно на променливите m, s. Чрез innerHTML вкарваме нужният ни текст(min:sec) и после увеличаваме секундите. Задаваме функцията clock() да се изпълнява през секунда и сме готови.
Съдържанието на body:

<p id="show" onclick="clock()">Show the clock!</p>
	
<span id="clock">Clock</span>

Хайде, ако още нещо не е ясно с радост ще ти помогнем.
Успех! :wink:

 

[kWo_2]

Става, но времето може ли да се показва

10:03 - > 10:04 защото сега е само 10:3 - > 10:4 тоест да има нула пред скундите до десед и от там вече да си както са си 10:11 и при нова минута показва само една нула 10:0, ако може да показват две 11:00

Надявам се да си ме разбрал

 

[fenixpz]

Заповядай:

 var m = 0;
      var s = 0;
      function clock() {
		s = check(s);
		m = check(m);
		document.getElementById('clock').innerHTML = m + ':' + s;
		s = parseFloat(s);
		m = parseFloat(m);
		s++;
         if(s > 59) {
            m += 1;
            s = 0;
         }   
         var t = setTimeout('clock()', 1000);
      }
	  function check(i) {
		if(i < 10) {
		  i = '0' + i;
		}
		return i;
	  }

:wink:

 

[kWo_2]

Така е супер, но как мога да направя да взима времето от

<span id="clock" class="1:31">Clock</span>
или както може и също така да може да са повечe от един елемент и пак да се отчита времето

<span id="clock" class="1:31">Clock</span>
<span id="clock" class="3:51">Clock</span>

Без да натискам клок да започва броенето
:lol:

Ако беше с jquery щях да го едитна и сам, но ..

 

[fenixpz]

Заповядай:

 var m = 0;
      var s = 0;
	  function num(i, i1) {
		return parseFloat(i) + parseFloat(i1);
	  }
      function clock() {
		s = check(s);
		m = check(m);
		document.getElementById('clock1').innerHTML = m + ':' + s;
		document.getElementById('clock2').innerHTML = check(num(m,3)) + ':' + check(num(s,3));
		document.getElementById('clock3').innerHTML = check(num(m,4)) + ':' + check(num(s,10));
		s = parseFloat(s);
		m = parseFloat(m);
		s++;
         if(s > 59) {
            m += 1;
            s = 0;
         }   
         var t = setTimeout('clock()', 1000);
      }
	  function check(i) {
		if(i < 10) {
		  i = '0' + i;
		}
		return i;
	  }
	  
	  $(function() {
		$('#get').click(function() {
			$('#info').val($('#clock2').html());
		});
	  });

body:

<body onload="clock()">
	
	<span id="clock1"></span><br />
	<span id="clock2"></span><br />
	<span id="clock3"></span><br />
	
	<input type="button" value="get" id="get" />
	<input type="text" id="info" />

</body>

Добявяме нова функция, чийто втори параметър(i1) е числото с което се увеличават секундите или минутите. И след това си генерираш часовниците.

 

[kWo_2]

Но пак времето е зададено от самият js file, а аз няма как в моят случай да променям на всеки таймер времето от js файла.

 

[fenixpz]

Извинявай, не мога да те разбера точно. Искаш самите потребители да си нагласяват таймера или?

 

[kWo_2]

Не, ако може времето да се взима като стойност от самите
<span id="clock3" date="2:31"></span><br /> с setAttribute

 

[fenixpz]

Аха! Кажи така де:

$(function() {
			$('span').each(function() {
				var obj = $(this);
				var m = obj.attr('class').slice(0,1);
				var s = obj.attr('class').slice(2,4);
				var t = setInterval(function() {
					s = parseFloat(s);
					m = parseFloat(m);
					s++;
					if(s > 59) {
						m += 1;
						s = 0;
					}
					if(s <= 9) {
						s = '0' + s;
					}
					if(m <= 9) {
						m = '0' + m;
					}
					obj.html(m + ':' + s);
				}, 1000);
			});
		});

ето и body-то:
   <span id="clock1" class="1:23"></span><br />
   <span id="clock2" class="2:40"></span><br />
   <span id="clock3" class="3:50"></span><br />

 

[kWo_2]

Е сега е пърфект!