Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2020, 22:11
Новичок на форуме
Отправить личное сообщение для Tavol Посмотреть профиль Найти все сообщения от Tavol
 
Регистрация: 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 секунд?, чтобы они отличались от первого скрипта?
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2020, 12:18
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 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.
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2020, 18:56
Новичок на форуме
Отправить личное сообщение для Tavol Посмотреть профиль Найти все сообщения от Tavol
 
Регистрация: 09.04.2020
Сообщений: 3

Сообщение от voraa Посмотреть сообщение
А при чем тут два скрипта?

Просто таймер нужен?
.....
Даже не представляю, где Вы взяли этот код, и чем он Вам подходит.
Да, мне нужен таймер, но мне нужно 2 таких таймера на странице, чтобы у каждого свое время было. Поэтому (как я понимаю) и попытался название функций изменить в надежде, что они оба запустятся.
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2020, 21:09
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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)
Ответить с цитированием
  #5 (permalink)  
Старый 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>
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2020, 22:46
Новичок на форуме
Отправить личное сообщение для Tavol Посмотреть профиль Найти все сообщения от Tavol
 
Регистрация: 09.04.2020
Сообщений: 3

Спасибо Вам!!!
ЗЫ: тут как то тему закрыть можно?! кнопок не вижу
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2020, 22:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модифицировать скрипт для работы с несколькими формами на одной странице javascript_pupil Общие вопросы Javascript 8 30.01.2017 12:53
Две галереи jquery на одной странице polearmik Общие вопросы Javascript 11 20.08.2015 00:20
Несколько скриптов на одной странице yoo Общие вопросы Javascript 14 17.07.2015 22:08
Ajax+js+5 форм обратной связи на одной странице aleksandr8i AJAX и COMET 0 01.04.2014 10:04
100-200 уникальных таймеров на одной странице. Aeliot Элементы интерфейса 36 30.06.2013 18:59