Только начинаю изучать JS, хочу написать простенький таймер, чтобы при нуле секунд проигрывался звуковой файл, но почему-то не работает, хотя если делать наоборот, т.е. таймер идет на увеличение и звук проигрывается при конкретном значении, то все работает. Пробовал уже передавать не введенные данные, а сразу изначальное значение, вставил алерт и вывод в консоль, работает, вставил на страницу просто текст, чтобы файл проигрывался при клике на текст - работает, вызывал функцию вручную через консоль - работает, а через функцию в коде нифига, пробовал менять значение, при котором должен звук проигрываться, все равно не работает.
Вот код, где не работает:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Таймер</title>
<meta charset="utf-8" />
</head>
<body onload="start()">
<!--<div>Введите количество минут и нажмите "Старт"</div>-->
<!--<div>-->
<!-- <!–Кнопка и в ней событие по клику - start, по которому будет запускаться функция start–>-->
<!-- <input type="button" name="start_button" value="Старт" onclick="start()"/><br>-->
<!--</div>-->
<!--Создаем HTML, где будет таймер-->
<h1 id="header"></h1>
<!--<audio src="bonem.mp3" autoplay="autoplay"></audio>-->
<p onclick="sound()">Кликни по этому тексту для запуска аудио</p>
<script>
// var min = prompt('Введите минуты', '');
var min = 1;
/*Объявляем переменную, в которой будет храниться значение таймера*/
var h1 = document.getElementById("header");
/*Объявляем переменную, в которой будет хранится количество секунд*/
var secund = min*60;
/*Функция, которая запускает звуковой файл*/
var sound = function () {
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = '../media/bonem.mp3'; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
console.log(secund);
};
/*Объявляем функцию, которая запускает таймер, функция перезапускается каждую секунду*/
function start() {
secund--; /*Каждую итерацию уменьшаем количество секунд на 1*/
if(secund===0){
sound(); /*Не работает!*/
alert('Алярьм!');
return;
}
/*Если меньше 10 секунд, то добавляем 0 перед минутами и секундами - это для красоты, не обязательно*/
if (secund>0&&secund<10 ) {
h1.textContent = ("1Осталось времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
}
/*Если меньше 10 минут, то*/
if(secund>=10&&secund<600){
if (secund%60 >= 0 && secund%60 < 10 ) {
/*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
h1.textContent = ("2.1Осталось времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
} else {
/*Добавляем 0 перед минутами, не обязательно, для красоты*/
h1.textContent = ("2.2Осталось времени: 0" + Math.floor(secund / 60) + ":" + secund % 60);
}
}
/*Если больше 10 минут, то 0 перед минутами уже не добавляем, только перед первыми 10 секундами*/
if(secund >=600){
if (secund%60 >= 0 && secund%60 < 10 ) {
/*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
h1.textContent = ("2.1Осталось времени: " + Math.floor(secund / 60) + ":0" + secund % 60);
} else {
/*Добавляем 0 перед минутами, не обязательно, для красоты*/
h1.textContent = ("3Осталось времени: " + Math.floor(secund / 60) + ":" + secund % 60);
}
}
/*Если больше 15 минут, то проигрываем звуковой файл*/
setTimeout(start, 10); /*Частота перезапуска функции, мс*/
}
</script>
</body>
</html>
А на увеличение работает, хотя вроде бы все то же самое:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>lost connect</title>
<meta charset="utf-8" />
</head>
<body>
<!--<div>Введите количество минут и нажмите "Старт"</div>-->
<div>
<!--Кнопка и в ней событие по клику - start, по которому будет запускаться функция start-->
<input type="button" name="start_button" value="Старт" onclick="start()"/><br>
</div>
<!--Создаем HTML, где будет таймер-->
<h1 id="header"></h1>
<!--<audio src="bonem.mp3" autoplay="autoplay"></audio>-->
<p onclick="sound()">Кликни по этому тексту для запуска аудио</p>
<script>
/*Объявляем переменную, в которой будет храниться значение таймера*/
var h1 = document.getElementById("header");
/*Объявляем переменную, в которой будет хранится количество секунд*/
var secund = 0;
/*Функция, которая запускает звуковой файл*/
var sound = function () {
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = '../media/bonem.mp3'; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
};
/*Объявляем функцию, которая запускает таймер, функция перезапускается каждую секунду*/
function start() {
secund++; /*Каждую итерацию увеличиваем количество секунд на 1*/
/*Если меньше 10 секунд, то добавляем 0 перед минутами и секундами - это для красоты, не обязательно*/
if (secund<=10 ) {
h1.textContent = ("1Прошло времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
}
/*Если меньше 10 минут, то*/
if(secund>=10&&secund<600){
if (secund%60 >= 0 && secund%60 < 10 ) {
/*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
h1.textContent = ("2.1Прошло времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
} else {
/*Добавляем 0 перед минутами, не обязательно, для красоты*/
h1.textContent = ("2.2Прошло времени: 0" + Math.floor(secund / 60) + ":" + secund % 60);
}
}
/*Если больше 10 минут, то 0 перед минутами уже не добавляем, только перед первыми 10 секундами*/
if(secund >=600){
if (secund%60 >= 0 && secund%60 < 10 ) {
/*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
h1.textContent = ("2.1Прошло времени: " + Math.floor(secund / 60) + ":0" + secund % 60);
} else {
/*Добавляем 0 перед минутами, не обязательно, для красоты*/
h1.textContent = ("3Прошло времени: " + Math.floor(secund / 60) + ":" + secund % 60);
}
}
/*Если больше 15 минут, то проигрываем звуковой файл*/
if(secund===900){
// alert('Алярьм!');
sound();
}
setTimeout(start, 10); /*Частота перезапуска функции, мс*/
}
</script>
</body>
</html>
Не пойму, в чем разница, кусок кода с функцией, которая звуковой файл проигрывает пробовал уже в разные места переставлять, и в начало и в конец, не помогает