javascript实现5秒倒计时并跳转功能


Posted in Javascript onJune 20, 2019

本文实例为大家分享了js实现5秒倒计时并跳转功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>倒计时五秒</title>
 <script>
 //使用匿名函数方法
 function countDown(){
 
 var time = document.getElementById("Time");
 //alert(time.innerHTML);
 //获取到id为time标签中的内容,现进行判断
 if(time.innerHTML == 0){
 //等于0时清除计时
 window.location.href="https://www.baidu.com" rel="external nofollow" ;
 }else{
 time.innerHTML = time.innerHTML-1;
 }
 }
 //1000毫秒调用一次
 window.setInterval("countDown()",1000);
 </script>
 <style>
 #Time,#p{
 font-size: 100px;
 text-align: center;
 }
 </style>
 </head>
 <body>
 <p id="Time">5</p>
 </body>
</html>

再为大家分享两段:

jQuery实现5秒倒计时

<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var i=5;
$(function(){
 setTimeout(function(){
 window.location.href='${ctx}/';
 },5000);//5秒后返回首页
 after();
});
//自动刷新页面上的时间
function after(){
 $("#time").empty().append(i);
 i=i-1;
 setTimeout(function(){
 after();
 },1000);
}
</script>

点击按钮出现5秒倒计时js代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
 <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

 <script type="text/javascript"> 
var countdown=5; 
function settime(val) { 
if(countdown != 0){
val.setAttribute("disabled", true); 
val.value="重新发送(" + countdown + ")"; 
countdown--; 
}else {
 val.removeAttribute("disabled"); 
 val.value="免费获取验证码"; 
 countdown = 5;

return;//避免无限循环
 } 
setTimeout(function() {
settime(val) 
},1000) 
}
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 #Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 #Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
javascript获取select值的方法完整实例
Jun 20 #Javascript
node基于async/await对mysql进行封装
Jun 20 #Javascript
JavaScrip数组去重操作实例小结
Jun 20 #Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
js控制框架刷新
2008/08/01 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
学子宴答谢词
2014/01/25 职场文书
技能竞赛活动方案
2014/02/21 职场文书
签约仪式主持词
2014/03/19 职场文书
法学求职信
2014/06/22 职场文书
汇报材料怎么写
2014/12/30 职场文书
项目验收申请报告
2015/05/15 职场文书
校运会新闻稿
2015/07/17 职场文书
详解Redis主从复制实践
2021/05/19 Redis
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL