Кодирование 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-код:


$config[zx-auto] not found$config[zx-overlay] not found