Как автозапуск JavaScript Countdown Timer

Я работаю над веб-страницей, на которой будут отображаться неподвижные изображения a с веб-камеры и, следовательно, нужно будет обновлять каждые 15 секунд.Как автозапуск JavaScript Countdown Timer

Я пытаюсь реализовать таймер обратного отсчета на моей странице, чтобы показать, когда страница будет обновляться.

Я нашел этот код на W3schools.com и изменил его в соответствии с моими потребностями, но этот таймер обратного отсчета начнется только после нажатия кнопки запуска. Мне интересно, как мне нужно изменить сценарий, чтобы таймер запустился автоматически при загрузке страницы?

Вот код:

<!DOCTYPE html> 
<html> 
<head> 
<body> 
<script> 
function timedText() { 
var x = document.getElementById('txt'); 
var t1 = setTimeout(function(){x.value = "15 seconds"},1000); 
var t2 = setTimeout(function(){x.value = "14 seconds"},2000); 
var t3 = setTimeout(function(){x.value = "13 seconds"},3000); 
var t4 = setTimeout(function(){x.value = "12 seconds"},4000); 
var t5 = setTimeout(function(){x.value = "11 seconds"},5000); 
var t6 = setTimeout(function(){x.value = "10 seconds"},6000); 
var t7 = setTimeout(function(){x.value = "9 seconds"},7000); 
var t8 = setTimeout(function(){x.value = "8 seconds"},8000); 
var t9 = setTimeout(function(){x.value = "7 seconds"},9000); 
var t10 = setTimeout(function(){x.value = "6 seconds"},10000); 
var t11 = setTimeout(function(){x.value = "5 seconds"},11000); 
var t12 = setTimeout(function(){x.value = "4 seconds"},12000); 
var t13 = setTimeout(function(){x.value = "3 seconds"},13000); 
var t14 = setTimeout(function(){x.value = "2 seconds"},14000); 
var t15 = setTimeout(function(){x.value = "1 seconds"},15000); 
} 
</script> 
</head> 
<body> 

<form> 
<input type="button" value="start" onclick="timedText()" /> 
<input type="text" id="txt" /> 
</form> 


</body> 
</html>

EDIT: здесь Оригинальный код с моей страницы:

<!DOCTYPE html> 
<HTML> 
<HEAD> 
<script type="text/JavaScript"> 
<!-- 
function timedRefresh(timeoutPeriod) { 
setTimeout("location.reload(true);",timeoutPeriod); 
} 
// --> 
</script> 
<TITLE>Local MDOT Cam's-KD8NXH's Page-- Superior Twp., Michigan</TITLE> 
<link rel="icon" 
type="image/ico" 
href="http://www.qsl.net/k/kd8nxh/favicon.ico"> 
<link rel="shortcut icon" href="http://www.qsl.net/k/kd8nxh/favicon.ico"  
type="image/icon"> <link rel="icon" href="http://www.qsl.net/k/kd8nxh/favicon.ico" type="image/icon"> 
</head> 
<body onload="JavaScript:timedRefresh(15000); timedText()"> 
<a href="http://www.qsl.net/kd8nxh/";"><img alt="" src="http://www.qsl.net/kd8nxh/BlueHomeButton.gif" style="width: 100px; height: 25px;" /></a> 
<script> 
window.onload = timedText; 
function timedText() { 
var txt = document.getElementById('txt'), 
counter = 15; 
var timer = setInterval(function() { 
if(counter === 0) return clearInterval(timer); 
txt.value = counter + " seconds"; 
counter--; 
}, 1000); 
}

источник

2014-12-08 NoviceCodingGeek

Пожалуйста, не используйте [* W3Schools *] (http://www.w3fools.com). – RobG

^Они хороши для быстрой справки, но не для «обучения» Кроме того, этот код, который они дают, - плохая практика проектирования. Рассмотрим использование цикла для объявлений с таймаутом. – ryanlutgen

@RobG Можете ли вы порекомендовать надежный источник кода? – NoviceCodingGeek

Помещенный

window.onload = timedText;

в вашем скрипте. При загрузке страницы будет запущена функция timedText.

Кстати, ваш код может быть значительно сокращен:

window.onload = timedText; 
 
function timedText() { 
 
    var txt = document.getElementById('txt'), 
 
    counter = 15; 
 
    var timer = setInterval(function() { 
 
    if(counter === 0) return clearInterval(timer); 
 
    txt.value = counter + " seconds"; 
 
    counter--; 
 
    }, 1000); 
 
}

<input type="text" id="txt" />

источник

2014-12-08 02:00:34

Я действительно не хочу иметь кнопку запуска в начале таймера, могу ли я просто удалить последнюю секцию сценария

@NoviceUbuntuGeek Да, посмотрите на фрагмент примера, я не включил элементы '' и работает так, как ожидалось. –

* setInterval * имеет тенденцию дрейфа, особенно если система занята. Для таймера обратного отсчета лучше использовать * setTimeout * и отрегулировать задержку на основе времени до следующей полной секунды. – RobG

Вы можете добавить это к вашему телу тегу:

<body onload="timedText()">

Это будет работать сразу после загрузки страницы

источник

2014-12-08 02:04:35

Тайм-ауты выполняются примерно в указанное время, а не точно. Хорошим способом их реализации является использование функции, которая вызывает себя каждую секунду, используя setTimeout с небольшими корректировками времени, основанными на различии в запаздывании.

например. отсчитывать использование:

function countDown(seconds) { 

    // Show the remaining seconds 
    console.log(seconds); 

    if (seconds > 0) { 
    // Get time to just after next full second 
    var lag = 1020 - new Date().getMilliseconds(); 
    setTimeout(function(){countDown(--seconds)}, lag); 
    } 
} 

countDown(10);

выше может быть улучшена путем запоминания времени, что он инициировал и делает счет оттуда, я оставлю это для вас. ;-)

источник

2014-12-08 02:10:22 RobG

Как автозапуск JavaScript Countdown Timer

ответ

Смежные вопросы