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 секунд?, чтобы они отличались от первого скрипта? |
А при чем тут два скрипта?
Просто таймер нужен? <!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' Даже не представляю, где Вы взяли этот код, и чем он Вам подходит. |
Цитата:
|
Цитата:
<!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) |
таймер timer
:write:
<!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,
темы не закрываются, возможно у кого-то будут вопросы или другие варианты решения. |
Часовой пояс GMT +3, время: 22:10. |