Форум

Tavol · #1 (**permalink**) 09.04.2020, 22:11

Здравствуйте, знаю, что запрос для Вас распространенный, но я в этом даже не новичок. Помогите сделать так, чтобы работало:
Код не мой, но максимально мне подходит.

<script language="JavaScript" type="text/javascript">
var sec=10;
var min=00;
function refresh()
{
sec--;
if(sec==-01){sec=59; min=min-1;}
else{min=min;}
if(sec<=9){sec="0" + sec;}
time=(min<=9 ? "0"+min : min) + ":" + sec;
if(document.getElementById){timer.innerHTML=time;}
inter=setTimeout("refresh()", 1000);
if(min=='00' && sec=='00'){
sec="00";
clearInterval(inter);
tut.innerHTML="Дождались";
}
}
</script>
<body onload="refresh();">
<span id="timer"></span>
<div id="tut">Ждем</div>

Как мне добавить второй?
Так не катит

<script language="JavaScript" type="text/javascript">
<!--
var sec=20;
var min=00;
function refresh111()
{
sec--;
if(sec==-01){sec=59; min=min-1;}
else{min=min;}
if(sec<=9){sec="0" + sec;}
time=(min<=9 ? "0"+min : min) + ":" + sec;
if(document.getElementById){timer111.innerHTML=time;}
inter=setTimeout("refresh111()", 1000);
if(min=='00' && sec=='00'){
sec="00";
clearInterval(inter);
tut.innerHTML="Дождались222";
}
}
//-->
</script>
<body onload="refresh111();">
<span id="timer111"></span>
<div id="tut1">Ждем222</div>

И как во втором случае задать 20 секунд?, чтобы они отличались от первого скрипта?

voraa · #2 (**permalink**) 10.04.2020, 12:18

А при чем тут два скрипта?

Просто таймер нужен?

<!DOCTYPE html>
<html>
<head>
<title>Таймер</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var sec=20;
var min=0;
var time = min * 60 + sec
function refresh111()
{
	var stime = ('0' + (time / 60 | 0)).slice(-2) + ':' +  ('0' + (time % 60)).slice(-2)
	document.getElementById ('timer111').innerHTML=stime;
if (time) {
	time--;
	inter=setTimeout("refresh111()", 1000);
} else {
	document.getElementById ('tut1').innerHTML="Дождались222";
}
}
</script>
<body onload="refresh111();">
<span id="timer111"></span>
<div id="tut1">Ждем222</div>
</html>

В тех кодах, которые вы привели всяких неточностей и ошибок полно

var sec=10; // Это число 10
var min=00; // Это число 0
А после этого
if(sec<=9){sec="0" + sec;}
sec станет строкой. И следующий раз никак нельзя будет делать sec --

if(document.getElementById) // getElementById - это функция. Она должна вызываться с параметрами

inter=setTimeout...
....
clearInterval(inter) // clearInterval - используется после функции setInterval

if(min=='00' && sec=='00') // min - число. и оно никогда не будет равно строке '00'

Даже не представляю, где Вы взяли этот код, и чем он Вам подходит.

Tavol · #3 (**permalink**) 10.04.2020, 18:56

Сообщение от voraa

А при чем тут два скрипта?

Просто таймер нужен?
.....
Даже не представляю, где Вы взяли этот код, и чем он Вам подходит.

Да, мне нужен таймер, но мне нужно 2 таких таймера на странице, чтобы у каждого свое время было. Поэтому (как я понимаю) и попытался название функций изменить в надежде, что они оба запустятся.

Malleys · #4 (**permalink**) 10.04.2020, 21:09

Сообщение от Tavol

Да, мне нужен таймер, но мне нужно 2 таких таймера на странице

Вам следует описать класс таймер и использовать его для создания определённых таймеров...

<!DOCTYPE html>
<html>
<head>
	<title>Таймер</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script>
function Timer(mins, secs) {
	this.startDate = new Date();
	this.duration = 1000 * (secs + 60 * mins);
	this.isTicking = this.duration > 0;
}

var timers = [{
	id: "timer-1",
	timer: new Timer(0, 20),
	messageId: "timer-message-1",
	messages: {
		waiting: "Ждём первый таймер",
		finished: "Дождались первый таймер"
	}
}, {
	id: "timer-2",
	timer: new Timer(0, 5),
	messageId: "timer-message-2",
	messages: {
		waiting: "Ждём второй таймер",
		finished: "Дождались второй таймер"
	}
}];

document.addEventListener("DOMContentLoaded", function loop() {
	setTimeout(loop, 500);
	
	timers.forEach(function(data) {
		var timer = data.timer;
		
		if(!timer.isTicking) return;
		
		var time = Math.floor(0.001 * Math.max(0, timer.duration - (new Date() - timer.startDate)));
		
		if(time === 0) {
			timer.isTicking = false;
		}
		
		var timerString = ("0" + (time / 60 | 0)).slice(-2) + ":" + ("0" + (time % 60)).slice(-2);
		document.getElementById(data.id).innerHTML = timerString;
		document.getElementById(data.messageId).innerHTML = timer.isTicking ? data.messages.waiting : data.messages.finished;
	});
});
	</script>

<body>
	<ul>
		<li>
			<span id="timer-1"></span>
			<div id="timer-message-1"></div>
		</li>
		<li>
			<span id="timer-2"></span>
			<div id="timer-message-2"></div>
		</li>
	</ul>
</html>

Если вам не нужно добавление новых таймеров позже (после того так закончились таймеры в массиве), то вы можете дописать проверку, нужно ли ещё запускать функцию loop. (строка №33)

рони · #5 (**permalink**) 10.04.2020, 22:14

<!DOCTYPE html>
<html>
<head>
    <title>Таймер</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
function Timer(mins, secs) {
    this.startDate = performance.now();
    this.duration = 1000 * (secs + 60 * mins);
    this.isTicking = this.duration > 0;
}

var timers = [{
    id: "timer-1",
    timer: new Timer(0, 20),
    messageId: "timer-message-1",
    messages: {
        waiting: "Ждём первый таймер",
        finished: "Дождались первый таймер"
    }
}, {
    id: "timer-2",
    timer: new Timer(0, 5),
    messageId: "timer-message-2",
    messages: {
        waiting: "Ждём второй таймер",
        finished: "Дождались второй таймер"
    }
}];

document.addEventListener("DOMContentLoaded", function loop() {

    timers.forEach(function(data, i) {
        var timer = data.timer;

       if(!timer.isTicking) return;

        var time = timer.duration - (performance.now() - timer.startDate);
        if(time <= 0) {
            timer.isTicking = false;
            time = 0;
            timers.splice(i, 1);
        }

        var timerString = new Date(time).toLocaleTimeString("ru", {minute : "2-digit", second : "2-digit"});
        document.getElementById(data.id).innerHTML = timerString;
        document.getElementById(data.messageId).innerHTML = timer.isTicking ? data.messages.waiting : data.messages.finished;
    });

    timers.length && requestAnimationFrame(loop);

});
    </script>
</head>
<body>
    <ul>
        <li>
            <span id="timer-1"></span>
            <div id="timer-message-1"></div>
        </li>
        <li>
            <span id="timer-2"></span>
            <div id="timer-message-2"></div>
        </li>
    </ul>
</body>
</html>

Tavol · #6 (**permalink**) 10.04.2020, 22:46

Спасибо Вам!!!

ЗЫ: тут как то тему закрыть можно?! кнопок не вижу

рони · #7 (**permalink**) 10.04.2020, 22:56

Tavol,
темы не закрываются, возможно у кого-то будут вопросы или другие варианты решения.

Форум

Справочник

Discord чат

Курсы javascript