javascript實現(xiàn)5秒倒計時并跳轉(zhuǎn)功能
更新時間：2019年06月20日 11:23:03 作者：lzpwzy
這篇文章主要為大家詳細介紹了javascript實現(xiàn)5秒倒計時并跳轉(zhuǎn)功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)5秒倒計時并跳轉(zhuǎn)功能的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒計時五秒</title>
<script>
//使用匿名函數(shù)方法
function countDown(){
var time = document.getElementById("Time");
//alert(time.innerHTML);
//獲取到id為time標簽中的內(nèi)容，現(xiàn)進行判斷
if(time.innerHTML == 0){
//等于0時清除計時
window.location. rel="external nofollow" ;
}else{
time.innerHTML = time.innerHTML-1;
}
}
//1000毫秒調(diào)用一次
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實現(xiàn)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>
點擊按鈕出現(xiàn)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="重新發(fā)送(" + countdown + ")";
countdown--;
}else {
val.removeAttribute("disabled");
val.value="免費獲取驗證碼";
countdown = 5;
return;//避免無限循環(huán)
}
setTimeout(function() {
settime(val)
},1000)
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript中的函數(shù)申明、函數(shù)表達式、箭頭函數(shù)
js中的函數(shù)可以通過幾種方式創(chuàng)建，具體創(chuàng)建方法通過實例代碼給大家介紹的非常詳細，文中通過例子給大家介紹了函數(shù)聲明和表達式之間的差別，感興趣的朋友跟隨小編一起看看吧2019-12-12
這篇文章主要介紹了javascript實現(xiàn)的右下角彈窗,實例分析了javascript實現(xiàn)右下角彈窗的完整實現(xiàn)步驟與技巧,需要的朋友可以參考下2015-04-04
支持各種瀏覽器的右下角浮動窗口，需要的朋友可以參考下。2010-04-04
這篇文章主要為大家整理了關于Bootstrap導航的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
前幾天用jquery做了一個JS的圖片輪播效果，現(xiàn)在用原生的javascript代碼實現(xiàn)同樣的功能，當練習用吧，代碼寫得不是很滿意。2010-09-09
要捕獲JavaScript代碼中的異常一般會采用 try catch，不過try catch的使用是否是對代碼性能產(chǎn)生影響呢？答案是肯定有的，但是有多少不得而知。下面這篇文章就給大家詳細介紹了在JS中用try catch對代碼運行的性能影響，有需要的朋友們可以參考借鑒。2016-12-12
流行的 JavaScript 庫有jQuery，MooTools，Prototype，Dojo和YUI等，這些 JavaScript 庫功能豐富，加上它們眾多的插件，幾乎能實現(xiàn)任何你需要的功能2011-06-06
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之面板,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)流星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了JavaScript獲取服務器時間的方法,結合實例形式詳細分析了javascript基于ajax獲取服務器時間的相關操作技巧,需要的朋友可以參考下2016-12-12