JavaScript实现时间倒计时跳转(推荐)


Posted in Javascript onJune 28, 2016

1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>setTimeout</title> 
</head> 
<body> 
<div id='div1'> </div> 
</body> 
</html> 
<script type="text/javascript"> 
//设定倒数秒数 
var t = 10; 
//显示倒数秒数 
function showTime(){ 
t -= 1; 
document.getElementById('div1').innerHTML= t; 
if(t==0){ 
location.href='http://www.baidu.com'; 
} 
//每秒执行一次,showTime() 
setTimeout("showTime()",1000); 
} 
//执行showTime() 
showTime(); 
</script>

2.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>
</body>
</html>

下面给大家介绍下相关阅读

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

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

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

下面通过示例(example)给大家介绍下 :

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js定时跳转页面的方法</title> 
</head> 
<body> 
<script type="text/javascript"> 
var t=10;//设定跳转的时间 
setInterval("refer()",1000); //启动1秒定时 
function refer(){ 
if(t==0){ 
location="www.baidu.com"; //#设定跳转的链接地址 
} 
document.getElementById('show').innerHTML=""+t+"秒后跳转"; // 显示倒计时 
t--; // 计数器递减 
} 
</script> 
<span id="show"></span> 
</body> 
</html>

遇到的问题:

当将上述js 的方法 放在$(function(){......})中时, 浏览器会报 methodXX() is not defined;

应当将function(){}的定义放在 <script></script>中

以上所述是小编给大家介绍的JavaScript实现时间倒计时跳转(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
jQuery异步提交表单实例
May 30 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 #Javascript
浅谈js的url解析函数封装
Jun 28 #Javascript
JavaScript中点击事件的写法
Jun 28 #Javascript
js改变style样式和css样式的简单实例
Jun 28 #Javascript
js改变css样式的三种方法推荐
Jun 28 #Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 #Javascript
获取input标签的所有属性的方法
Jun 28 #Javascript
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
python实战教程之自动扫雷
2018/07/13 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python Web版语音合成实例详解
2019/07/16 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
Django如何重置migration的几种情景
2021/02/24 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
求职简历自荐信范文
2013/10/21 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
八一建军节演讲稿
2014/09/10 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
优秀大学生申请书
2019/06/24 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript