JavaScript codering voor een aftelling van 10 naar 0

JavaScript is een bekende en veel gebruikte scripttaal die voornamelijk wordt gebruikt om toepassingen voor webpagina's te schrijven. Je kunt honderden handige apps maken met behulp van JavaScript, inclusief een countdown-timer. U kunt een JavaScript-script coderen om een ​​aftelprocedure van 10 tot nul op uw webpagina weer te geven en een bericht weer te geven wanneer deze nul bereikt. JavaScript-scripts kunnen in elke teksteditor worden gemaakt, zoals Kladblok en WordPad, maar moeten worden opgeslagen met de extensie ".js" om functioneel te zijn.

1.

Maak een nieuw tekstbestand en noem dit "timer.js." De extensie ".js" geeft aan dat dit een JavaScript-bestand is. Open het bestand in een teksteditor, zoals Kladblok of WordPad.

2.

Definieer twee variabelen (Timer en TotalSeconds) door deze twee regels in te voegen:

var Timer; var TotalSeconds;

3.

Maak een nieuwe functie (CreateTimer) die de timer op uw webpagina weergeeft door deze code in te voegen:

functie CreateTimer (TimerID, Tijd) {Timer = document.getElementById (TimerID); TotalSeconds = Tijd; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

De "window.setTimeout (" Tick () ", 1000);" functie zorgt ervoor dat de timer elke seconde tikt. Je script ziet er nu als volgt uit:

var Timer; var TotalSeconds;

functie CreateTimer (TimerID, Tijd) {Timer = document.getElementById (TimerID); TotalSeconds = Tijd; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

4.

Voeg een functie toe die de timer dwingt om elke tik met één seconde te verlagen:

function Tick () {if (TotalSeconds <= 0) {alert ("Time's up!") keer terug; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

Het argument "if (TotalSeconds <= 0)" zorgt ervoor dat het aftellen stopt bij nul en geeft de "Time's up!" bericht. De "window.setTimeout (" Tick () ", 1000);" functie zorgt ervoor dat het aftellen doorgaat totdat het nul bereikt.

5.

Voeg een functie in om de timer bij te werken elke tik, zodat u het aftellen kunt zien:

function UpdateTimer () {Timer.innerHTML = TotalSeconds; }

6.

Je script ziet er nu als volgt uit:

var Timer; var TotalSeconds;

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

function Tick () {if (TotalSeconds <= 0) {alert ("Time's up!") keer terug; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

function UpdateTimer () {Timer.innerHTML = TotalSeconds; }

7.

Sla het bestand op. Gebruik deze HTML-code om het script op een webpagina te gebruiken:

Aanbevolen

Juridisch een bedrijf beschermen
2019
Ideeën voor zakelijke bijeenkomsten
2019
Marketingplannen voor een plantenkwekerij
2019