JS实现分享页面自动关闭效果
2016-12-14 11:47
393 查看
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实现的定时关闭页面或定时提醒效果代码
- js实现类似MSN提示的页面效果代码分享
- js实现的定时关闭页面或定时提醒效果代码
- JS实现点击图片在当前页面放大并可关闭的漂亮效果
- JS实现点击图片在当前页面放大并可关闭的漂亮效果
- js实现弹窗提示,N秒后自动关闭并跳转页面
- js实现类似MSN提示的页面效果代码分享
- 用js实现分享到随页面滚动而滑动效果
- js实现分享到随页面滚动而滑动效果的方法
- js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- 利用js实现对页面的自动刷新
- CSS+JS实现点击文字弹出定时自动关闭的DIV层菜单
- js代码:实现主页面滚动条随iframe里的内容自动调整
- js 实现页面两边广告, 可关闭对联广告 随滚动条滚动 符合w3c标准
- js基础:实现页面打开后滚动到最底端的效果
- JS弹出模式提示窗体,实现页面其他地方不可编辑效果
- js实现页面loading效果_JavaScript
- 利用js实现对页面的自动刷新
- 如何在Joomla!管理后台中实现标签页面的效果(tabs.js) 【转】
- 如何实现页面顶部flash播放完自动关闭