Este artigo descreve o método de usar o Settimeout para implementar uma caixa de aviso pop-up atrasada. Compartilhe para sua referência. Os detalhes são os seguintes:
Primeiro mostre -lhe um código JS para a janela pop -up de atraso/cronometramento/forçado
Parâmetro Explicação: Definir Tempo: Então. Alterar tamanho) Dialogwidth: 800px (largura) DialogHeight: 600px (altura) 3000 (tempo de pop-up de atraso, unidade: milissegundos.1 Segundo = 1000ms) <!-pop-up ad-> <script idioma = "javascript"> function () {var então = novo date () então. String (document.cookie) var cookieheader = "cookie1 =" var começoPosition = cookiestring.indexof (cookieHeader) if (BeginPosition! = -1) {} else {document.cookie = "cookie1 = popwin; expira ="+ Então.togmtString () focusiD = setTimeout ("focus (); window.showmodelessdialog ('ttan.htm', '', 'roll: 0; status: 0; Ajuda: 0; Redicável: 0; Dialogwidth: 0px; dialogHeight: 0px ') ", 3000) window.focus ();}} get (); </script> <!-pop-up ---> Conteúdo de tTan.htm: <script linguagem = "javascript"> <!-window.open ("http: // pop-up pop-up/"); //-> </sCript> <script linguy = "javascript"> <!-settimeout ('pode ser o que está no mesmo tempo; Pop -up atrasado, e pode alcançar o pop -up forçado! !Depois que o código a seguir for executado, uma caixa de aviso aparecerá depois de clicar no botão, que demonstra principalmente como usar o setTimeout
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> atraso a caixa de promotos de exibição </title> <style> #div1 {float: esquerda; Largura: 60px; Altura: 60px; Background-Color: Aqua; } #div2 {Position: relativo; flutuar: esquerda; margem: 0 10px; Largura: 200px; Altura: 200px; Background-Color: #CCCCCC; Exibir: Nenhum; } </style> <cript> window.onload = function () {var odiv1 = document.getElementById ('div1'); var odiv2 = document.getElementById ('div2'); var timer = null; // odiv1.onMouseOver = function () {// clearTimeout (timer); // odiv2.style.display = 'bloqueio'; // div2 // Quando o mouse se move para div1}; //// odiv1.onmouseout = function () {// timer = setTimeout (function () {// odiv2.style.display = 'nenhum'; // ocultar div2 //} quando o rato remove o rato, 500); // Para passar de Div1 para Div2, o Div2 Hidden deve ter uma configuração de atraso //}; //// odiv2.onmouseover = function () {// cleartimeout (timer); // limpe a configuração de atraso, quando o mouse se move para o div2, o div2 deve ser exibido //}; //// odiv2.onmouseout = function () {// timer = setTimeout (function () {// odiv2.style.display = 'nenhum'; // Quando o mouse se afasta do div2, div2 deve ser oculto //}, 500); // Quando o mouse se move para o div2 e para o div1, o div2 piscará e exibe novamente, define um atraso para limpar o efeito piscando; // // Após definir o atraso e quando o mouse se move para o div1, o div2 está oculto porque o setTimeout, // // o atraso deve ser limpo e o código para o atraso é adicionado no evento ODIV1.onMouseOver para limpar o atraso. //}; // Como os códigos nesses quatro eventos são iguais ou semelhantes, o seguinte processamento simplificado pode ser feito: odiv1.onMouseOver = odiv2.onMouseOver = function () {ClearTimeout (Timer); odiv2.style.display = 'bloco'; /* Quando o mouse se move para o div1, o div2 é exibido. Embora Odiv2.OnMouseOver não esteja escrito no odiv2.style.display = 'Block'; Mas, de fato, o ODIV2 está no estado de 'bloco', escrever mais um código não tem impacto substancial*/}; odiv1.onMouseOut = odiv2.onMouseOut = function () {timer = setTimeout (function () {odiv2.style.display = 'nenhum'; // ocultar div2 Quando o mouse remove div1}, 500); // Para passar do DIV1 para o DIV2, deve haver uma configuração de atraso quando o Div1 for movido do Div1}; // O resultado da execução do código simplificado é exatamente o mesmo que o efeito do código anterior. } </sCript> </head> <body> <h2> caixa de promotos de atraso </h2> <div id = "div1"> </div> <div id = "div2"> </div> </body> </html>Os pontos que precisam receber atenção ao escrever a caixa Prompt de atraso são gravados nos comentários. Por favor, preste atenção a ele um por um. Esta função é mais suave depois de ler o tutorial em vídeo. O motivo é que, antes de escrever o código, uma lista das funções necessárias é implementada uma a uma. Se houver um problema, é muito melhor fazer ajustes correspondentes do que escrever o código diretamente.