Este artículo describe el método de usar SetTimeOut para implementar un cuadro de advertencia emergente retrasado. Compártelo para su referencia. Los detalles son los siguientes:
Primero mostrarle un código JS para la ventana emergente de retraso/cronometraje/forzada
Explicación del parámetro: Establezca tiempo: luego.setTime (entonces.getTime () + 1*60*60*1000) mylove/ttan.htm (Página web de transición) htm http: // Página web emergente/es la página web para emerger desplazamiento: 1 (barra de desplazamiento) Estado: 1 (Barra de estado) Ayuda: 1 (Ayuda) Herramient para cambiar el tamaño) Dialogwidth: 800px (ancho) DialogHeight: 600px (altura) 3000 (Tiempo emergente de retraso, Unidad: MilliseConds.1 Second = 1000ms) <!-Pop-Up AD-> <Script Language = "JavaScript"> function get () {var entonces = nueva fecha () entonces.setTime (luego. String (document.cookie) var cookieHeader = "cookie1 =" var beginPosition = CookeString.IndexOf (CookieHeader) if (BeginPosition! = -1) {} else {document.cookie = "Cookie1 = popwin; expires ="+ Entonces.togmtString () focusId = setTimeOut ("focus (); window.showModeScelessDialog ('ttan.htm', '', 'desplazamiento: 0; estado: 0; Ayuda: 0; Resivable: 0; Dialogwidth: 0px; DialogHeight: 0px ') ", 3000) Window.focus ();}} get (); </script> <!-Pop-up --->> Contenido de ttan.htm: <script language = "javascript"> <!-window.open ("http: // pop-up webpage/"); //-> </script> <script language = "javascript"> < ¡Y puede lograr la ventana emergente forzada! !Después de ejecutar el siguiente código, aparecerá un cuadro de advertencia después de hacer clic en el botón, que demuestra principalmente cómo usar SetTimeout
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> retraso de visualización cuadro de inmediato </title> <syle> #div1 {float: izquierda; Ancho: 60px; Altura: 60px; Color de fondo: Aqua; } #div2 {posición: relativo; flotante: izquierda; margen: 0 10px; Ancho: 200px; Altura: 200px; Color de fondo: #CCCCCC; Pantalla: ninguno; } </style> <script> window.onload = function () {var odiv1 = document.getElementById ('div1'); var odiv2 = document.getElementById ('div2'); var timer = null; // odiv1.onmouseover = function () {// cleartimeout (temporizador); // odiv2.style.display = 'block'; // div2 // cuando el mouse se mueve a div1}; //// odiv1.onmouseout = function () {// timer = setTimeout (function () {// odiv2.style.display = 'none'; // hide div2 //} cuando el mouse elimina div1, 500); // Para moverse de Div1 a Div2, Div2 oculto debe tener una configuración de retraso //}; //// odiv2.onmouseover = function () {// cleartimeout (temporizador); // Borrar la configuración de retraso, cuando el mouse se mueve a Div2, Div2 debe mostrarse //}; //// odiv2.onmouseout = function () {// timer = setTimeOut (function () {// odiv2.style.display = 'none'; // Cuando el mouse se mueve de Div2, Div2 debe estar oculto //}, 500); // Cuando el mouse se mueve Div2 y en Div1, Div2 parpadeará y mostrará nuevamente, establecerá un retraso para borrar el efecto parpadeante; // // Pero después de establecer el retraso y cuando el mouse se mueve a Div1, Div2 está oculto porque SetTimeout, // // el retraso debe borrar, y el código para el retraso se agrega en el evento ODIV1.NonMouseOver para borrar el retraso. //}; // Dado que los códigos en estos cuatro eventos son los mismos o similares, el siguiente procesamiento simplificado se puede hacer: ODIV1.onMouseOver = Odiv2.onMouseOver = function () {ClearTimeOut (temporizador); odiv2.style.display = 'bloque'; /* Cuando el mouse se mueve a Div1, se muestra Div2. Aunque ODIV2.onMouseOver no está escrito en Odiv2.Style.Display = 'Block'; Pero, de hecho, ODIV2 está en el estado de 'bloque', escribir un código más no tiene un impacto sustancial*/}; odiv1.onmouseout = odiv2.onmouseOut = function () {timer = setTimeOut (function () {odiv2.style.display = 'none'; // oculta Div2 cuando el mouse elimina div1}, 500); // Para moverse de Div1 a Div2, debe haber una configuración de retraso cuando DIV1 se mueve fuera de DIV1}; // El resultado de ejecución de código simplificado es exactamente el mismo que el efecto de código anterior. } </script> </head> <body> <h2> Buzón de indicación de retraso </h2> <div id = "div1"> </div> <div id = "div2"> </div> </body> </html>Los puntos a los que deben prestarse atención al escribir el cuadro de inmediato de retraso se registran en los comentarios. Por favor preste atención uno por uno. Esta función es más suave después de leer el video tutorial. La razón es que antes de escribir el código, una lista de funciones requeridas se implementa una por una. Si hay un problema, es mucho mejor hacer los ajustes correspondientes que escribir el código directamente.