js页面倒计时7天 java_javascript实现倒计时跳转页面

本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理，非常的简单实用，有需要的小伙伴可以参考下。

很多网页都有类似的效果，那就是经过指定的时间能够跳转到其他页面，如果再人性化一点话，会带有倒计时效果，本章节就介绍一下如何实现此效果，代码实例如下:

var t=10;

setInterval("refer()",1000);

function refer(){

if(t==0){

location.href="//www.jb51.net";

}

document.getElementById('show').innerHTML=""+t+"秒后跳转到脚本之家";

t--;

}

以上代码实现了我们想要的效果，能够在10秒之后跳转到指定页面，下面介绍一下实现过程。

一.实现原理:

原理非常的简单，就是利用setInterval()定时器函数，每秒执行一次refer()函数，此函数能够没执行一次将t减1，同时将当前的t的值写入div中，如果t减到0,也就是倒计时完毕，就跳转到指定页面。原理大致如此。

二.相关阅读:

1.setInterval()函数可以参阅setInterval()函数用法详解一章节。

2.location.href可以参阅Location对象的href属性一章节。

3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。

下面给大家分享2个简单的跳转代码，做一下总结，各种定时跳转代码记录如下：

(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内)

//3秒钟之后跳转到指定的页面

setTimeout(window.location.href='//www.jb51.net',3);

(2)html代码实现，在页面的head区域块内加上如下代码

js页面倒计时7天 java_javascript实现倒计时跳转页面相关推荐

js跳转页面参数过长用post请求跳转页面
1.拿到原始url 2.创建form表单 3.给表单插入数据 4.跳转页面有个优化点跳转页面时候会闪一下form表单需要处理下 <!DOCTYPE html> <html>& ...
php不能header跳转页面,PHP问题：php header方法跳转页面问题
php header方法跳转页面:1.立即跳转,代码为[header('Location:other.php')]:2.提示跳转,代码为[header('Refresh:3,Url=other.php ...
js页面倒计时7天 java_javascript实现倒计时效果
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下首先先写一个布局 #numbers p { position: absolute; font-size: 1 ...
js小案例：使用location.href自动跳转页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
关于vue.js 编程导航的使用：实现路由配置和跳转页面
本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且当前操作,除了路由跳转以外,还会有一些别的附加操作(比如执 ...
js layui跳转页面_Layui数据表格跳转到指定页的实现方法
Layui数据表格跳转到指定页的实现方法 1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 2.获取上述input并设置其value属性值为目标跳转页面页码 $(&quo ...
js制作点击跳转页面
首先我们上效果图: 我们第一步制作html和css部分: <!DOCTYPE html> <html lang="en"> <head>< ...
php页面跳转可以用header,php如何使用header()跳转页面？
php使用header()跳转页面的方法:1.使用"header('Location:url页面地址');"立即跳转页面:2.使用"header('Refresh:tim ...
php跳转404_ThinkPHP设置404跳转页面
ThinkPHP3.2.3设置404跳转页面在ThinkPHP3.2版本中当我们访问不存在的页面时会出现错误提示页面: error.png 解决办法: 1.在ThinkPHP3.2详细的介绍了该框架 ...

js页面倒计时7天 java_javascript实现倒计时跳转页面

js页面倒计时7天 java_javascript实现倒计时跳转页面相关推荐

最新文章

热门文章