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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python模块的制作方法实例分析
2019/12/21 Python
python中doctest库实例用法
2020/12/31 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
如何理解委托
2012/01/06 面试题
个人自荐材料
2014/05/23 职场文书
班级读书活动总结
2014/06/30 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
机动车登记业务委托书
2014/10/08 职场文书
世界红十字日活动总结
2015/02/10 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
linux下安装redis图文详细步骤
2021/12/04 Redis