This article describes the method of using setTimeout to implement a delayed pop-up warning box. Share it for your reference. The details are as follows:
First show you a JS code for delay/timed/forced popup window
Parameter explanation: Set time: Then.setTime(Then.getTime() + 1*60*60*1000)mylove/ttan.htm(transition webpage)htm http://popup webpage/ is the webpage to pop up scroll:1(scroll bar)status:1(status bar)help:1(help button)toolbar=1(toolbar)resizable:1(can you drag with mouse to change size)dialogWidth:800px(width)dialogHeight:600px(height)3000(delay popup time, unit: milliseconds.1 second=1000ms)<!--Pop-up ad--><script language="JavaScript">function Get(){var Then = new Date()Then.setTime(Then.getTime() + 1*60*60*1000)var cookieString = new String(document.cookie)var cookieHeader = "Cookie1="var beginPosition = cookieString.indexOf(cookieHeader)if (beginPosition != -1){} else{ document.cookie = "Cookie1=POPWIN;expires="+ Then.toGMTString()focusid=setTimeout("focus();window.showModelessDialog('ttan.htm','','scroll:0;status:0;help:0;resizable:0;dialogWidth:0px;dialogHeight:0px')",3000)window.focus();}}Get();</script><!--Pop-up---> Contents of ttan.htm: <script language="javascript"><!--window.open("http://pop-up webpage/");//--></script><script LANGUAGE="JavaScript"><!--setTimeout('window.close();', 0)//--></script> It can only pop up once for the same IP within a certain period of time, it can achieve delayed pop up, and it can achieve forced pop up! !After the following code is executed, a warning box will pop up after clicking the button, which mainly demonstrates how to use setTimeout
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Delay display prompt box</title> <style> #div1 { float: left; width: 60px; height: 60px; background-color: aqua; } #div2 { position: relative; float: left; margin: 0 10px; width: 200px; height: 200px; background-color: #cccccc; display: none; } </style> <script> window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var timer = null;// oDiv1.onmouseover = function () {// clearTimeout(timer);// oDiv2.style.display = 'block'; // div2// when the mouse moves into div1 };//// oDiv1.onmouseout = function () {// timer = setTimeout(function () {// oDiv2.style.display = 'none'; //Hide div2// } when the mouse removes div1, 500); //In order to move from div1 to div2, div2 hidden should have a delay setting // }; //// oDiv2.onmouseover = function () {// clearTimeout(timer); // Clear the delay setting, when the mouse moves into div2, div2 should be displayed // }; //// oDiv2.onmouseout = function () {// timer = setTimeout(function () {// oDiv2.style.display = 'none'; // When the mouse moves out of div2, div2 should be hidden // }, 500); //When the mouse moves out div2 and into div1, div2 will flash and display again, set a delay to clear the blinking effect; // // But after setting the delay and when the mouse moves into div1, div2 is hidden because setTimeout, // // The delay should be cleared, and the code for the delay is added in the oDiv1.onmouseover event to clear the delay. // }; // Since the codes in these four events are the same or similar, the following simplified processing can be done: oDiv1.onmouseover = oDiv2.onmouseover = function () { clearTimeout(timer); oDiv2.style.display = 'block'; /* When the mouse moves into div1, div2 is displayed. Although oDiv2.onmouseover is not written in the oDiv2.style.display = 'block'; but in fact oDiv2 is in the 'block' state, writing one more code has no substantial impact*/ }; oDiv1.onmouseout = oDiv2.onmouseout = function () { timer = setTimeout(function () { oDiv2.style.display = 'none'; //Hide div2 when the mouse removes div1 }, 500); //In order to move from div1 to div2, there should be a delay setting when div1 is moved out of div1 };//The simplified code execution result is exactly the same as the previous code effect. } </script></head><body><h2>Delay prompt box</h2><div id="div1"></div><div id="div2"></div></body></html>The points that need to be paid attention to when writing the delay prompt box are recorded in the comments. Please pay attention to it one by one. This function is smoother after reading the video tutorial. The reason is that before writing the code, a list of required functions is implemented one by one. If there is a problem, it is much better to make corresponding adjustments than to write the code directly.