framedesignlab.com

JavaScript - це добре відома та широко використовувана мова сценаріїв, яка використовується здебільшого для написання програм для веб-сторінок. За допомогою JavaScript можна створити сотні корисних програм, включаючи таймер зворотного відліку. Ви можете кодувати скрипт JavaScript, щоб відобразити відлік часу від 10 до нуля на вашій веб-сторінці та відобразити повідомлення, коли воно досягне нуля. Сценарії JavaScript можна створювати в будь-якому текстовому редакторі, наприклад Блокноті та WordPad, але для функціонування їх потрібно зберігати з розширенням ".js"

1

Створіть новий текстовий файл і назвіть його "timer.js". Розширення ".js" вказує, що це файл JavaScript. Відкрийте файл у текстовому редакторі, наприклад Блокноті або WordPad.

2

Визначте дві змінні (Timer та TotalSeconds), вставивши ці два рядки:

var Таймер; var TotalSeconds;

3

Створіть нову функцію (CreateTimer), яка відображає таймер на вашій веб-сторінці, вставивши цей код:

функція CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Час; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

"Window.setTimeout (" Tick () ", 1000);" функція робить таймер галочкою кожну секунду. Ваш скрипт тепер виглядає так:

var Таймер; var TotalSeconds;

функція CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Час; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

4

Додайте функцію, яка змушує таймер зменшуватися на одну секунду кожної галочки:

функція Tick () {if (TotalSeconds <= 0) {alert ("Час закінчився!") return; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

Аргумент "if (TotalSeconds <= 0)" забезпечує відлік зворотного відліку на нулі та відображає "Час закінчився!" повідомлення. "Window.setTimeout (" Tick () ", 1000);" функція забезпечує відлік часу, доки не досягне нуля.

5

Вставте функцію для оновлення таймера кожного тику, щоб ви могли бачити зворотний відлік:

функція UpdateTimer () {Timer.innerHTML = TotalSeconds; }

6

Ваш скрипт тепер виглядає так:

var Таймер; var TotalSeconds;

функція CreateTimer (TimerID) {Timer = document.getElementById (TimerID); TotalSeconds = 10; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

функція Tick () {if (TotalSeconds <= 0) {alert ("Час закінчився!") return; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

функція UpdateTimer () {Timer.innerHTML = TotalSeconds; }

7

Збережіть файл. Щоб використовувати сценарій на веб-сторінці, використовуйте цей HTML-код: