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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue-lazyload使用总结(推荐)
Nov 01 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
JavaScript组合继承详解
Nov 07 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
php懒人函数 自动添加数据
2011/06/28 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
List the Codec Files on a Computer
2007/06/18 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
Django中的Model操作表的实现
2018/07/24 Python
基于python实现学生管理系统
2018/10/17 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
EJB实例的生命周期
2016/10/28 面试题
受欢迎的大学生自我评价
2013/12/05 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
nginx 添加http_stub_status_module模块
2022/05/25 Servers