Bir Geri Sayım İçin JavaScript Kodlaması 10'dan 0'a

JavaScript, çoğunlukla Web sayfalarına uygulamalar yazmak için kullanılan, iyi bilinen ve yaygın olarak kullanılan bir komut dosyası dilidir. Bir geri sayım sayacı dahil, JavaScript kullanarak yüzlerce kullanışlı uygulama oluşturabilirsiniz. Web sayfanızda 10'dan sıfıra kadar geri sayım görüntülemek ve sıfıra ulaştığında bir mesaj görüntülemek için bir JavaScript komut dosyasını kodlayabilirsiniz. JavaScript komut dosyaları, Notepad ve WordPad gibi herhangi bir metin düzenleyicide oluşturulabilir, ancak işlevsel olması için ".js" uzantısıyla kaydedilmesi gerekir.

1.

Yeni bir metin dosyası oluşturun ve "timer.js" olarak adlandırın. ".Js" uzantısı bunun bir JavaScript dosyası olduğunu gösterir. Dosyayı Not Defteri veya WordPad gibi bir metin düzenleyicide açın.

2.

Bu iki satırı ekleyerek iki değişkeni (Timer ve TotalSeconds) tanımlayın:

var Timer; var TotalSeconds;

3.

Bu kodu ekleyerek Web sayfanızdaki zamanlayıcıyı görüntüleyen yeni bir işlev (CreateTimer) oluşturun:

İşlev CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Zaman; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

"Window.setTimeout (" Tick () ", 1000);" fonksiyonu zamanlayıcıyı her saniye kene yapar. Komut dosyanız şimdi şuna benziyor:

var Timer; var TotalSeconds;

İşlev CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Zaman; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

4.

Zamanlayıcıyı her saniye bir saniye düşmeye zorlayan bir işlev ekleyin:

işlevi Tick () {if (TotalSeconds <= 0) {alert ("Time up!") return; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

"İf (TotalSeconds <= 0)" argümanı geri sayımın sıfırda durmasını sağlar ve "Süre doldu!" mesaj. "Window.setTimeout (" Tick () ", 1000);" fonksiyonu geri sayımın sıfıra gelinceye kadar devam etmesini sağlar.

5.

Zamanlayıcıyı her tıklamayı güncellemek için bir fonksiyon ekleyin, böylece geri sayımı görebilirsiniz:

işlevi UpdateTimer () {Timer.innerHTML = TotalSeconds; }

6.

Komut dosyanız şimdi şuna benziyor:

var Timer; var TotalSeconds;

İşlev CreateTimer (TimerID) {Timer = document.getElementById (TimerID); TotalSeconds = 10; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

işlevi Tick () {if (TotalSeconds <= 0) {alert ("Time up!") return; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

işlevi UpdateTimer () {Timer.innerHTML = TotalSeconds; }

7.

Dosya 'yı kaydet. Komut dosyasını bir web sayfasında kullanmak için bu HTML kodunu kullanın: