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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
vue使用nprogress实现进度条
Dec 09 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
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php画图实例
2014/11/05 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
js 数组操作代码集锦
2009/04/28 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python生成IP段的方法
2015/07/07 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
军训教官感言
2014/03/02 职场文书
大学生活自我评价
2014/04/09 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
高三英语教学计划
2015/01/23 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
解决Redis启动警告问题
2022/02/24 Redis