Кодирование JavaScript для обратного отсчета с 10 до 0
JavaScript - это хорошо известный и широко используемый язык сценариев, который в основном используется для написания приложений для веб-страниц. Вы можете создавать сотни полезных приложений с помощью JavaScript, включая таймер обратного отсчета. Вы можете закодировать сценарий JavaScript для отображения обратного отсчета от 10 до нуля на вашей веб-странице и отображения сообщения, когда он достигнет нуля. Сценарии JavaScript могут быть созданы в любом текстовом редакторе, таком как Блокнот и WordPad, но должны быть сохранены с расширением «.js», чтобы работать.
1
Создайте новый текстовый файл и назовите его «timer.js». Расширение «.js» указывает на то, что это файл JavaScript. Откройте файл в текстовом редакторе, например в Блокноте или WordPad.
2
Определите две переменные (Timer и TotalSeconds), вставив эти две строки:
var Timer; var TotalSeconds;
3
Создайте новую функцию (CreateTimer), которая отображает таймер на вашей веб-странице, вставив этот код:
функция CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Время; UpdateTimer () window.setTimeout ("Tick ()", 1000); }
"Window.setTimeout (" Tick () ", 1000);" функция заставляет таймер срабатывать каждую секунду. Ваш сценарий теперь выглядит так:
var Timer; var TotalSeconds;
функция CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Время; UpdateTimer () window.setTimeout ("Tick ()", 1000); }
4
Добавьте функцию, которая заставляет таймер уменьшаться на одну секунду каждый тик:
функция Tick () {если (TotalSeconds <= 0) {предупреждение ("Время вышло!") return; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }
Аргумент «if (TotalSeconds <= 0)» гарантирует, что обратный отсчет останавливается на нуле и отображает «Время вышло!» сообщение. "Window.setTimeout (" Tick () ", 1000);" функция гарантирует, что обратный отсчет продолжается, пока не достигнет нуля.
5
Вставьте функцию для обновления таймера каждый тик, чтобы вы могли видеть обратный отсчет:
функция UpdateTimer () {Timer.innerHTML = TotalSeconds; }
6
Ваш сценарий теперь выглядит так:
var Timer; var TotalSeconds;
функция CreateTimer (TimerID) {Timer = document.getElementById (TimerID); TotalSeconds = 10; UpdateTimer () window.setTimeout ("Tick ()", 1000); }
функция Tick () {если (TotalSeconds <= 0) {предупреждение ("Время вышло!") return; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }
функция UpdateTimer () {Timer.innerHTML = TotalSeconds; }
7
Сохраните файл. Чтобы использовать скрипт на веб-странице, используйте этот HTML-код: