09.04.2020, 22:11
|
Новичок на форуме
|
|
Регистрация: 09.04.2020
Сообщений: 3
|
|
2 cкрипта на одной странице
Здравствуйте, знаю, что запрос для Вас распространенный, но я в этом даже не новичок. Помогите сделать так, чтобы работало:
Код не мой, но максимально мне подходит.
<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 секунд?, чтобы они отличались от первого скрипта?
|
|
10.04.2020, 12:18
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
А при чем тут два скрипта?
Просто таймер нужен?
<!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'
Даже не представляю, где Вы взяли этот код, и чем он Вам подходит.
Последний раз редактировалось voraa, 10.04.2020 в 12:41.
|
|
10.04.2020, 18:56
|
Новичок на форуме
|
|
Регистрация: 09.04.2020
Сообщений: 3
|
|
Сообщение от voraa
|
А при чем тут два скрипта?
Просто таймер нужен?
.....
Даже не представляю, где Вы взяли этот код, и чем он Вам подходит.
|
Да, мне нужен таймер, но мне нужно 2 таких таймера на странице, чтобы у каждого свое время было. Поэтому (как я понимаю) и попытался название функций изменить в надежде, что они оба запустятся.
|
|
10.04.2020, 21:09
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от 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)
|
|
10.04.2020, 22:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
таймер timer
<!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>
|
|
10.04.2020, 22:46
|
Новичок на форуме
|
|
Регистрация: 09.04.2020
Сообщений: 3
|
|
Спасибо Вам!!!
ЗЫ: тут как то тему закрыть можно?! кнопок не вижу
|
|
10.04.2020, 22:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Tavol,
темы не закрываются, возможно у кого-то будут вопросы или другие варианты решения.
|
|
|
|