快捷導(dǎo)航

javascript實(shí)現(xiàn)5秒倒計(jì)時(shí)并跳轉(zhuǎn)功能

更新時(shí)間：2019年06月20日 11:23:03 作者：lzpwzy

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)5秒倒計(jì)時(shí)并跳轉(zhuǎn)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)5秒倒計(jì)時(shí)并跳轉(zhuǎn)功能的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>倒計(jì)時(shí)五秒</title>
 <script>
 //使用匿名函數(shù)方法
 function countDown(){
 
 var time = document.getElementById("Time");
 //alert(time.innerHTML);
 //獲取到id為time標(biāo)簽中的內(nèi)容，現(xiàn)進(jìn)行判斷
 if(time.innerHTML == 0){
 //等于0時(shí)清除計(jì)時(shí)
 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實(shí)現(xiàn)5秒倒計(jì)時(shí)

<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秒后返回首頁(yè)
 after();
});
//自動(dòng)刷新頁(yè)面上的時(shí)間
function after(){
 $("#time").empty().append(i);
 i=i-1;
 setTimeout(function(){
 after();
 },1000);
}
</script>

點(diǎn)擊按鈕出現(xiàn)5秒倒計(jì)時(shí)js代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
 <input type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" 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="免費(fèi)獲取驗(yàn)證碼"; 
 countdown = 5;

return;//避免無(wú)限循環(huán)
 } 
setTimeout(function() {
settime(val) 
},1000) 
}
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)
js中的函數(shù)可以通過(guò)幾種方式創(chuàng)建，具體創(chuàng)建方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，文中通過(guò)例子給大家介紹了函數(shù)聲明和表達(dá)式之間的差別，感興趣的朋友跟隨小編一起看看吧
2019-12-12
javascript實(shí)現(xiàn)的右下角彈窗實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的右下角彈窗,實(shí)例分析了javascript實(shí)現(xiàn)右下角彈窗的完整實(shí)現(xiàn)步驟與技巧,需要的朋友可以參考下
2015-04-04
多瀏覽器支持的右下角浮動(dòng)窗口
支持各種瀏覽器的右下角浮動(dòng)窗口，需要的朋友可以參考下。
2010-04-04
整理關(guān)于Bootstrap警示框的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
原生javascript實(shí)現(xiàn)圖片輪播效果代碼
前幾天用jquery做了一個(gè)JS的圖片輪播效果，現(xiàn)在用原生的javascript代碼實(shí)現(xiàn)同樣的功能，當(dāng)練習(xí)用吧，代碼寫(xiě)得不是很滿意。
2010-09-09
JS中用try catch對(duì)代碼運(yùn)行的性能影響分析
要捕獲JavaScript代碼中的異常一般會(huì)采用 try catch，不過(guò)try catch的使用是否是對(duì)代碼性能產(chǎn)生影響呢？答案是肯定有的，但是有多少不得而知。下面這篇文章就給大家詳細(xì)介紹了在JS中用try catch對(duì)代碼運(yùn)行的性能影響，有需要的朋友們可以參考借鑒。
2016-12-12
19個(gè)很有用的 JavaScript庫(kù)推薦
流行的 JavaScript 庫(kù)有jQuery，MooTools，Prototype，Dojo和YUI等，這些 JavaScript 庫(kù)功能豐富，加上它們眾多的插件，幾乎能實(shí)現(xiàn)任何你需要的功能
2011-06-06
Bootstrap基本組件學(xué)習(xí)筆記之面板(14)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之面板,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JavaScript canvas實(shí)現(xiàn)流星特效
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)流星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
JavaScript獲取服務(wù)器時(shí)間的方法詳解
這篇文章主要介紹了JavaScript獲取服務(wù)器時(shí)間的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript基于ajax獲取服務(wù)器時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12