您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關JS分享頁面自動關閉效果怎么弄的內容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
通常我們在分享內容后,會有個新的窗口提示分享成功,然后倒計時關閉窗口。
要實現這個效果,我們要寫兩個頁面:
先創建用于點擊的頁面 open_window.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="javascript:a()">點擊分享至微博</a> </body> <script type="text/javascript"> function a(){ window.open("new_window.html","_blank","width=500,height=200,top=200,left=300");//設置打開新的窗口的大小及位置 } </script> </html>
寫好第一個頁面之后,我們再來做定時器的頁面new_window.html,讓彈出的新窗口5秒后自動關閉:
<!DOCTYPE HTML> <html> <head> <title>倒計時自動關閉/跳轉頁面</title> <meta charset="utf-8" /> <script>//作業: 改成周期性定時器實現 function myClose(){//任務 //取出time中的數,保存在n中 var n=parseInt(time.innerHTML); n-=1//將n-1 if(n>0){//如果n>0 //將n+秒鐘后自動關閉 再放回time中 time.innerHTML=n+"秒鐘后自動關閉"; //再啟動下一次定時器,將序號再保存在timer中 timer=setTimeout(arguments.callee,1000); }else{//否則 close();//關閉 } } var timer=null;//保存定時器序號 window.onload=function(){ timer=setTimeout(myClose,1000);//啟動一次性定時器 } </script> </head> <body style="text-align: center;"> <p style="color: red;font-size: 20px;">(≧▽≦)分享成功!</p><br/><br /> <span id="time">5秒鐘后自動關閉</span><br/><br /> <a href="javascript:clearTimeout(timer)">留在本頁</a> <a href="open_window.html">返回首頁頁</a> </body> </html>
點擊后運行效果如下:
感謝各位的閱讀!關于JS分享頁面自動關閉效果怎么弄就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。