Javascript melaksanakan kemahiran kotak gesaan paparan tertunda kesan khas code

Javascript melaksanakan kemahiran kotak gesaan paparan tertunda kesan khas code_javascript

WBOY

Lepaskan： 2016-05-16 15:03:31

asal

2022 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara JavaScript menggunakan setTimeout untuk melambatkan kotak amaran pop timbul. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Saya akan tunjukkan dahulu kod JS kepada anda untuk tetingkap timbul tertunda/dimasa/paksa

参数解释：
设置时间：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一定时间内只弹出一次，可以实现延迟弹出，可以实现强制弹出！！

Salin selepas log masuk

Selepas kod berikut dilaksanakan, mengklik butang akan melambatkan pop timbul kotak amaran, yang terutamanya menunjukkan penggunaan 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>

Salin selepas log masuk

Mata yang perlu diberi perhatian semasa menulis kotak gesaan kelewatan direkodkan dalam ulasan dan perhatikan satu persatu Fungsi ini agak lancar untuk dilaksanakan selepas menonton video tutorial bahawa senarai fungsi yang diperlukan dibuat sebelum menulis kod Melaksanakannya satu demi satu mengikut senarai, dan membuat pelarasan yang sepadan apabila masalah timbul adalah lebih baik daripada menulis kod secara langsung.