Aprendí JS hace unos días y vi dos funciones muy interesantes, a saber, la función SetTimeOut y la función SetInterval. Estas dos funciones pueden hacer que las páginas web presenten efectos muy comunes en las páginas web, como carruseles de imágenes y algunos efectos muy divertidos. ¡Aprendamos sobre estas dos funciones a continuación!
La sintaxis y la aplicación de una función setTimeOut y la función setInterval
1. FUNCIÓN DE LA ESTIMAUT
Definición y uso: el método SetTimeOut () se usa para llamar a una función o calcular una expresión después del número especificado de milisegundos.
Sintaxis: setTimeOut (código, milisec);
parámetro:
Código (requerido): la cadena de código JavaScript se ejecutará después de que se llame la función.
Millisec (requerido): el número de milisegundos para esperar antes de ejecutar el código.
pista:
setTimeOut () ejecuta el código solo una vez. Si desea llamar varias veces, use setInterval () o haga que el código mismo llame setTimeOut () nuevamente.
Valor de retorno
Un valor que se puede pasar a Window.ClearTimeOut () para cancelar la ejecución periódica del código.
Dado que SetTimeout es una función de temporizador, hay funciones para limpiar el temporizador, por lo que usamos la función ClearTimeOut.
ClearTimeOut (valor de identificación devuelto por setTimeOut ());
2. Definición de Interval
El método SetInterval () llama a una función o calcula una expresión de acuerdo con el período especificado (en milisegundos).
El método SetInterval () llamará a la función continuamente hasta que se llame ClearInterval () o la ventana está cerrada. El valor de ID devuelto por setInterval () se puede usar como parámetro para el método ClearInterval ().
gramática
setInterval (código, milisec [, "lang"]);
Se requiere código de parámetros. La función a llamar o la cadena de código que se ejecutará.
Millisec debe. El intervalo entre la ejecución periódica o el código de llamadas, en milisegundos
Valor de retorno
Un valor que se puede pasar a Window.ClearInterval () para cancelar la ejecución periódica del código.
Dado que SetTimeout es una función de temporizador, hay funciones para limpiar el temporizador, por lo que usamos la función ClearInterval ().
ClearInterval () (valor de identificación devuelto por setInterval ());
2. Caso:
Efecto de cuenta regresiva
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> en cuenta </title> <script type = "text/html; charset = utf-8"/> <title> en cuenta </title> <script type = "text/html; charset = utf-8"/> <title> en cuenta </title> <script type = "text/html; charset = utf-8"/> <title> método JS para lograr el efecto de cuenta regresiva var t1; Window.Onload = function () {// 01 Posición al botón Inicio y devuelve un objeto DOM var btns = document.getElementById ('btnstart'); // 02. Registre el evento de clic para el botón Inicio btns.onclick = function () {// Ejecute la función que el primer parámetro de la función setInterval se ejecutará regularmente, y el segundo parámetro es la función que ejecuta cada milisegundos t1 = setInterval (inicio, 1000); } // 03 Posición al botón Detener para devolver un objeto DOM var btnst = document.getElementById ('btnstop'); btnst.onclick = function () {clearInterval (t1); }} // función para ejecutarse 1 segunda función start () {// 01. Obtenga el texto en el DIV para asignar a una variable var divdom = document.getElementById ('msg'); var divnum = divdom.inntext; // juzga si el valor de divnum es 0 if (divnum> 0) {divnum--; // Reasignar el valor sustrado a Divnum divdom.inntext = divnum; }}} </script> </head> <body> <input type = "button" id = "btnstart" value = "start"/> <input type = "button" id = "btnstop" value = "stop"/> <br/> <div id = "msg"> 10 </div> </body> </html>Cambio de imagen de fondo:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </title> </script type = "text/javaScript" 1; // Defina la variable inicial a la primera imagen de la ventana predeterminada. } // La función de la función se ejecutará show () {// Si la imagen llega a la última (5 imágenes), cambie la siguiente imagen mostrada a la primera. Si no se alcanza la última imagen, la siguiente imagen se mostrará si (Count> 5) {Count = 1; } else {Count ++; } // Obtenga el objeto DOM con ID myImg var dom = document.getElementById ("myImg"); // Cambie el apuntado del atributo SRC de la etiqueta IMG y cambie la imagen DOM.SRC = "Image/"+Count+". Jpg"} </script> </head> <body> <img src = "image/1.jpg" id = "myimg"/> </body> </html>Nombre de la persona que llama
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </title> </script type = "text/jawrcript" matriz para guardar los datos básicos en el namer var data = ['zhang san', 'li si', 'wang er', 'xiao chen', 'xiao zhang']; var i = 0; // declare una variable inicial para permitir que la primera persona se muestre en la página por defecto Var T1; Window.Onload = function () {// 02. Obtenga el objeto DOM del botón de inicio para registrar el evento de clic para el objeto var dom = document.getElementById ("myBtn"); dom.OnClick = function () {// use la función setInterval para llamar a la función de resultado t1 = setInterval (start, 500); // Este método solo llama a SetTimout (Stop, 6000); } // Definir una función anónima para asignarla a un resultado variable var start = function () {// 03get el objeto de etiqueta H1 y asigne un valor al texto de la etiqueta H1 var domh = document.getElementById ("myh1"); domh.inntext = data [i % data.length]; // Reemplazar el valor existente del elemento i ++; } // llame a la función anónima inicial (); var stop = function () {// Borrar el temporizador ClearInterval (t1); // Los estudiantes que hacen clic en el cuadro de inmediato aparecen y responden alerta ("por favor" + document.getElementById ("myh1"). Innertext + "Respuesta de los estudiantes"); }}} </script> </head> <body> <h1 id = "myh1"> </h1> <botón id = "mybtn"> Comience a llamar </boton> </body> </html>A través de los casos anteriores, creo que todos deberían estar familiarizados con estas dos funciones.
El artículo anterior tiene una comprensión profunda de la función SetTimeOut y la función SetInterval. Este artículo es todo el contenido que he compartido contigo. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.