首頁 > 開發者 > JavaScript

javascript實現延時顯示提示框特效代碼_javascript技巧

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了JavaScript使用setTimeout實現延遲彈出警告框的方法。分享給大家供大家參考。具體如下：

先給大家展示一個延遲/定時/強制快顯視窗的JS代碼

參數解釋：設定時間：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;dialogWidth: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一定時間內只彈出一次，可以實現延遲彈出，可以實現強制彈出！！

下面的代碼執行後點擊按鈕會延遲彈出一個警告框，主要示範了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>

延時提示框編寫時需要注意的點都記錄在注釋當中，逐個對照注意一下，這個功能看過視頻教程之後實現起來比較順暢，原因是在編寫代碼之前對所需功能做了一個列表按照列表一一實現，出現問題再進行相應的調整比上來直接寫代碼強多了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More