Come il conto alla rovescia Utilizzando JavaScript

September 6

Come il conto alla rovescia Utilizzando JavaScript


JavaScript è stato sviluppato da Netscape come uno strumento per rendere i siti web più interattivo e coinvolgente. Considerato inizialmente da alcuni come un linguaggio "giocattolo", JavaScript sta guadagnando il riconoscimento come uno strumento indispensabile per la creazione di applicazioni web, siti di social media e applicazioni mobili. Un esempio della potenza di JavaScript risiede nei suoi metodi di tempo del sistema. I metodi setTimeout () e setInterval () innescano gli eventi dopo un periodo di tempo predefinito è trascorso. Quando setTimeout () viene chiamato, esegue il suo lavoro, una volta in background. La funzione setInterval (), tuttavia, continuerà a innescare lo stesso evento ripetutamente finché è bloccato dal metodo clearInterval ().

istruzione

1 Avviare il, pianura editor di testo standard che è disponibile sul computer.

2 Inserire il codice seguente nel editor di testo:

<Html>

<Head>

<Script type = "text / javascript">

var fullCount = 10;

var = startTime fullCount;

var QuitIt = 0;

Funzione myTimer ()

{

document.getElementById ( "count") innerHTML = startTime.;

. Document.getElementById ( "myButton") value = "Conteggio";

QuitIt = setInterval ( "changeDiv ()", 1000);

}

funzione changeDiv ()

{

startTime=startTime-1;

document.getElementById ( "count") innerHTML = startTime.;

if (startTime == 0)

{

clearInterval (QuitIt);

. Document.getElementById ( "myButton") value = "Conte si fa";

startTime = fullCount;

}

}

</ Script>

</ Head>

<Body>

<H1> Countdown </ h1>

<Input id = tipo "myButton" = valore "pulsante" = "Inizia il conto alla rovescia" onclick = "myTimer ()" />

<h1 id = "count"> </ h1>

</ Body>

</ Html>

3 Fare clic sul menu File. Selezionare l'opzione "Salva". Salvare sotto il nome del file "test.html."

4 Avviare il browser web che è disponibile sul computer. Fare clic sulla voce di menu "File" e selezionare "Apri file".

5 Individuare il "test.html" file creato e quindi fare clic su "Apri".

Consigli e avvertenze

  • L'esempio fornito con questo articolo inizierà il conto alla rovescia ogni volta che l'utente fa clic sul pulsante. Per disattivare il pulsante, è possibile aggiungere il comando document.getElementById ( "myButton"). Onclick = "" ;. Questo rimuoverà l'evento onclick () dal timer. Ecco la nuova funzione changeDiv ():
  • funzione changeDiv ()
  • {
  • startTime = startTime-1;
  • document.getElementById ( "count") innerHTML = startTime.;
  • if (startTime == 0)
  • clearInterval (QuitIt);
  • . Document.getElementById ( "myButton") value = "Conte si fa";
  • . Document.getElementById ( "myButton") onClick = "";
  • }
  • JavaScript è un linguaggio di programmazione tra maiuscole e minuscole. Le variabili "Cshell" e "CShell" sono considerati unico dall'interprete. D'altra parte, HTML è case insensitive. Supponiamo che ci sia una dichiarazione HTML:
  • "<Input type =" button "onClick () =" someFunction () "value =" click ">".
  • Nel codice HTML, sia "onclick ()" e "onClick ()" si esegue una funzione JavaScript. Quando un metodo JavaScript cerca di modificare l'evento onclick (), tuttavia, deve utilizzare lo stesso caso come viene utilizzato nel codice HTML. La dichiarazione JavaScript "document.getElementById ( 'myButton') onclick = '';." Non riuscirà a inattivare il tasto perché il caso non corrisponde al codice HTML.