Home >Web Front-end >JS Tutorial >Javascript implements delayed display prompt box special effects code_javascript skills

Javascript implements delayed display prompt box special effects code_javascript skills

WBOYOriginal: 2016-05-16 15:03:312009browse

The example in this article describes how JavaScript uses setTimeout to delay pop-up warning boxes. Share it with everyone for your reference. The details are as follows:

I will first show you the JS code for a delayed/timed/forced pop-up window

参数解释：
设置时间：Then.setTime(Then.getTime() + 1*60*60*1000)

mylove/ttan.htm(过渡网页)
ttan.htm中的 http://弹出网页/ 是要弹出的网页

scroll:1(滚动条)
status:1(状态栏)
help:1(帮助按钮)
toolbar=1(工具栏)
resizable:1(是否可以用鼠标拖动改变大小)
dialogWidth:800px(宽度)
dialogHeight:600px(高度)
3000(延迟弹出的时间，单位：毫秒。1秒=1000毫秒)

<!--弹出广告-->
<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;d
ialogWidth:0px;dialogHeight:0px')",3000)
window.focus();
}
}Get();
</script>
<!--弹出结束-->
　　ttan.htm的内容：

<script language="javascript">
<!--
window.open("http://弹出网页/");
//-->
</script>
<script LANGUAGE="JavaScript">
<!--
setTimeout('window.close();', 0)
//-->
</script>
　　可以实现同一IP一定时间内只弹出一次，可以实现延迟弹出，可以实现强制弹出！！

After the following code is executed, clicking the button will delay the pop-up of a warning box, which mainly demonstrates the use of setTimeout

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>延时显示提示框</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';  //鼠标移入div1时显示div2
//   };
//
//   oDiv1.onmouseout = function () {
//    timer = setTimeout(function () {
//     oDiv2.style.display = 'none';  //鼠标移除div1时隐藏div2
//    }, 500);  //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
//   };
//
//   oDiv2.onmouseover = function () {
//    clearTimeout(timer);  //清除延时器设置,当鼠标移入div2时,div2应当显示
//   };
//
//   oDiv2.onmouseout = function () {
//    timer = setTimeout(function () {
//     oDiv2.style.display = 'none';  //当鼠标移出div2时,div2应当隐藏
//    }, 500);   //当鼠标移出div2并移入div1时,div2会闪烁一下再显示,设置一个延时,清除闪烁的效果;
//    // 但是设置延时器之后,鼠标移入div1时,div2却隐藏了,原因是setTimeout,
//    // 应当清除延时器,在oDiv1.onmouseover事件中添加,清除延时器的代码
//   };


//   由于这四个事件中代码两两对应地相同或相似,可以做如下简化处理:

   oDiv1.onmouseover = oDiv2.onmouseover = function () {
    clearTimeout(timer);
    oDiv2.style.display = 'block';
    /* 鼠标移入div1时显示div2,虽然oDiv2.onmouseover事件中没有写oDiv2.style.display = 'block';
     但是实际上oDiv2是'block'状态,多写一句代码没有实质性影响*/
   };


   oDiv1.onmouseout = oDiv2.onmouseout = function () {
    timer = setTimeout(function () {
     oDiv2.style.display = 'none';  //鼠标移除div1时隐藏div2
    }, 500);  //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
   };
//   简化后的代码执行结果跟前面的代码效果完全一致.
  }
 </script>
</head>
<body>
<h2>延时提示框</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. Compare and pay attention to them one by one. This function is relatively smooth to implement after watching the video tutorial. The reason is that a list of required functions is made before writing the code. Implementing them one by one according to the list, and making corresponding adjustments when problems arise is much better than writing code directly.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of the on() method of jQuery events to bind multiple selectors and multiple events_jqueryNext article：A brief analysis of the on() method of jQuery events to bind multiple selectors and multiple events_jquery

See more

Javascript implements delayed display prompt box special effects code_javascript skills

Related articles