js 倒计时跳转
2024-10-18 19:26:51
用js实现简单的倒计时结束页面跳转效果,主要用到setInterval()和clearInterval()方法,页面跳转使用window.location.href = " "。倒计时结束后在当前页面进行跳转。
效果图:
代码:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>js倒计时跳转</title>
</head>
<style>
body{
height: 100%;
width: 100%;
}
#content{
position:absolute;
top:-200px;
bottom:0;
left:0;
right:0;
margin:auto;
padding: 20px;
border:1px solid #bcbcbc;
width: 500px;
height: 100px;
text-indent : 40px;
font-size: 18px;
line-height: 40px;
text-align:center;
}
#time{
margin-top: 20px;
text-align:center;
}
#timer{
width: 220px;
padding: 10px;
font-size: 20px;
background: #06428B;
color: white;
border: 0px;
border-radius: 3px;
}
#timer:hover{
cursor: pointer;
}
</style>
<body>
<div id="content">
<div>这是一个倒计时跳转的例子</div>
<div id="time" >
<input id="timer" type="button" value="开始跳转10秒" onclick="btnClick();"/>
</div>
</div> </body>
<script type="text/javascript" >
var time = 9; //时间秒,自己调整!
function CountDown() {
if (time >= 0) {
msg = "开始跳转" + time + "秒";
document.all["timer"].value = msg;
--time;
} else{
clearInterval(timer);
window.location.href = "https://www.cnblogs.com/weijuanran/";//在原来的窗体中直接跳转用
}
}
timer = setInterval("CountDown()", 1000); function btnClick() {
window.location.href = "https://www.cnblogs.com/weijuanran/";//在原来的窗体中直接跳转用
//window.open("https://www.cnblogs.com/weijuanran/");//打开新的窗口页
}
</script> </html>
(冰雪林中著此身,不同桃李混芳尘)
最新文章
- [译]Asp.net MVC 之 Contorllers(二)
- Linux ubuntu安装
- Android中top命令字段含义
- Java关键字this、super使用总结
- The ";Real"; Project Plan
- 转-TabHost组件(一)(实现底部菜单导航)
- systemtap 列出所有linux 内核模块与相关函数0
- 0.0C语言重点问题回顾
- Eclipse中安装MemoryAnalyzer插件及使用
- String的charAt(int index)可用于遍历一个字符串的所有字符
- 【MySQL 读书笔记】普通索引和唯一索引应该怎么选择
- about this blog
- Debian 8下手工安装 Eclipse CDT neon.2
- 基于timestamp和nonce的防重放攻击
- js笔记2
- struts2默认临时文件更改
- 利用WebHook实现PHP自动部署Git代码
- Java并发容器——CopyOnWriteArrayList
- MySQL案例07:MySQL5.7并发复制隐式bug
- &#39;java&#39; 不是内部或外部命令,也不是可运行的程序的两个解决办法
热门文章
- css 选择器基础
- 数据库艰难求生之路(基础:增删改查)part2
- Arduino入门笔记(5):1602液晶实验(实现时钟)
- Fusion Log
- 吴恩达机器学习笔记61-应用实例:图片文字识别(Application Example: Photo OCR)【完结】
- 【Netty】(9)---Netty编解码器
- .NET Core微服务之基于Apollo实现统一配置中心
- 关闭 Mac 拼写自动纠正与横线转换
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
- Perl多线程(1):解释器线程的特性