JS实现分享页面主动关闭结果
发布时间:09/01 来源:未知 浏览:
关键词:
平常我们在分享内容后,会有个新的窗口提醒分享成功,然后倒计时关闭窗口。
要实现这个结果,我们要写两个页面:
先创立用于点击的页面 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实现分享页面主动关闭结果的具体内容,更多请关注百分百源码网其它相关文章!