js 倒计时跳转
用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>
（冰雪林中著此身，不同桃李混芳尘）
js 倒计时跳转的更多相关文章
- js 倒计时 跳转
1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code ...
- js倒计时跳转链接
(function(){ var loadUrl = 'http://www.cnblogs.com/naokr/',//跳转链接 loadTime = 3000,//跳转时间 reTime = 10 ...
- js倒计时跳转jquery插件版
<script type="text/javascript" src="js/jquery1.91.min.js"></script> ...
- js倒计时跳转页面
var t=10; setInterval(function refer(){ if(t>0){ document.getElementById("em").innerHTM ...
- js倒计时跳转页面实现
- js 倒计时跳转页面
<script type="text/javascript">var i = 5; var intervalid; intervalid = setInterval(& ...
- js写的5秒钟倒计时跳转
使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过 代码如下: <html> <head> < ...
- JS倒计时网页自动跳转代码
<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...
- JS——页面倒计时跳转
Js几秒后倒计时跳转 <html><head><title>出错啦~~~</title><link href="css/login1.c ...
随机推荐
- Challenges-XSS
https://alf.nu/alert1 warmup adobe JSON
- SQL Server 数据库基于备份文件的【一键还原】
1. 备份与还原的基础说明 我们知道在DBA的日常工作中,SQL Server 数据库的恢复请求偶有发生,可能是用作数据的追踪,可也可能能是数据库的灾难恢复. 数据库常用的备份命令如下: ----完整 ...
- 4. [mmc subsystem] mmc core（第四章）——host模块说明
零.说明 对应代码drivers/mmc/core/host.c,drivers/mmc/core/host.h. 为底层host controller driver实现mmc host的申请以及注册 ...
- 第一周Python学习笔记
Python 基本语法: ① Python程序的格式:1.用代码高亮来标识函数丶语句等等 本身的代码高亮并没有实际的意义,只是用来辅助编程人员和阅读人员 更好的识别 2.程序以缩进来标识语句,缩进用 ...
- 记录SoapUI使用说明
一.SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到E ...
- 如何在Microsoft Word里面插入图片作为背景/封面？
Stay hungry, Stay foolish. 如何在Word里面插入图片作为背景?其实很简单,开门见山,我们只需要这几步即可! 1.第一步,打开要插入图片的Word 2.第二步,插入图 ...
- Cesium3DTileset示例
3D Tiles是Cesium中很核心的一部分,尤其是用来实现大范围的模型场景数据的加载应用. 三维倾斜模型.人工建模.BIM模型等等,都可以转换成3D Tiles,进而为我们所用. 从Cesium1 ...
- .Net之Nopi Excel数据导出和批量导入功能
一.介绍NPOI和编写demo的原因 1.Npoi是什么: 它是一个专门用于读写Microsoft Office二进制和OOXML文件格式的.NET库,我们使用它能够轻松的实现对应数据的导入,导出功能 ...
- ajax的请求步骤！每个状态值表示什么？
什么是是ajax ! AJAX即"Asynchronous JavaScript and XML"(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战：开发环境搭建【详细版】
缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...