这篇文章主要介绍了使用javascript如何实现一个5秒倒计时并跳转功能,亿速云小编觉得不错,现在分享给大家,也给大家做个参考,一起跟随亿速云小编来看看吧!
Java主要应用于:1. web开发;2. Android开发;3. 客户端开发;4. 网页开发;5. 企业级应用开发;6. Java大数据开发;7.游戏开发等。
具体内容如下
<!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如何实现一个5秒倒计时并跳转功能,如何觉得亿速云网站的内容还不错,欢迎将亿速云网站推荐给身边好友。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。