来自 技术 2019-01-22 的文章

JS实现分享页面自动关闭效果

本篇文章给大家带来的内容是关于JS实现分享页面自动关闭效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。【推荐教程:JavaScript教程】

通常我们在分享内容后,会有个新的窗口提示分享成功,然后倒计时关闭窗口。

要实现这个效果,我们要写两个页面:

先创建用于点击的页面 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-1if(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      分享页面      自动关闭效果      免费空间什么好   
上一篇:微信小程序下拉框组件使用方法
下一篇:没有了