本文實例為大家分享了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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答