網頁倒數計時跳轉程式碼例項
本章節介紹一下如何實現網頁倒數計時效果,並且倒數計時完成實現網頁的跳轉。
此效果能在一定程度上提交人性化,至少那種摸黑倒計要好的多。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var oshow=document.getElementById("show"); function count(num,show){ function done(){ show.innerHTML="跳轉倒數計時:"+(num>9?num:"0"+num)+"秒"; num=num-1; if(num<0){ location.href="http://www.softwhy.com"; } setTimeout(done,1000); } done(); } count(16,oshow); } </script> </head> <body> <div id="show"></div> </body> </html>
以上程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var oshow=document.getElementById("show"),獲取顯示倒數計時實現的元素物件。
(3).function count(num,show){},此函式實現了倒數計時效果,第一個引數,是要倒數計時的描述,第二個是顯示倒數計時的物件。
(4).function done(){},宣告此函式的目的是實現遞迴,如果直接遞迴count函式的話,無法傳遞引數。
(5).show.innerHTML="跳轉倒數計時:"+(num>9?num:"0"+num)+"秒",將倒數計時剩餘的描述寫入指定的元素,裡面的三元運算子的目的是為了給個位數的描述前面加零。
(6).num=num-1,描述減一。
(7).if(num<0){location.href="http://www.softwhy.com";},當num的值小於零的時候就進行跳轉。
(8).setTimeout(done,1000),每隔一秒執行一次done函式,遞迴呼叫done函式。
二.相關閱讀:
(1).三元運算子參閱三元運算子用法詳解一章節。
(2).innerHTML屬性參閱JavaScript innerHTML一章節。
(3).setTimeout()方法參閱window.clearTimeout()一章節。
相關文章
- JavaScript倒數計時程式碼例項JavaScript
- 商品搶購倒數計時效果程式碼例項
- 獲取倒數第幾個元素程式碼例項
- 倒數計時(Excel程式碼集團)Excel
- JavaScript 倒數計時60秒程式碼JavaScript
- JavaScript頁面跳轉程式碼JavaScript
- js cookie 頁面倒數計時JSCookie
- js自動倒數計時程式碼,倒數計時完畢時自動停止迴圈JS
- 小程式 - 驗證碼倒數計時元件元件
- 線上直播系統原始碼,開屏首頁廣告點選跳過按鈕跳過倒數計時原始碼
- 網頁引用百度地圖例項程式碼網頁地圖
- JavaScript 倒數計時關閉頁面JavaScript
- 小程式倒數計時深究
- 前端學習程式碼例項-JavaScript 阻止擊超連結的跳轉前端JavaScript
- 網頁中嵌入百度地圖程式碼例項網頁地圖
- 直播小程式原始碼,vue實現時間倒數計時原始碼Vue
- 設計模式例項程式碼設計模式
- 倒數計時
- 關於CSS中@support實現漸進式網頁設計例項程式碼CSS網頁
- Jquery 實現頁面倒數計時的功能jQuery
- JavaScript取餘數程式碼例項JavaScript
- 獲取驗證碼倒數計時
- 倒數計時獲取驗證碼
- 視訊直播系統原始碼,倒數計時顯示,商品秒殺倒數計時原始碼
- Python實現簡單網頁圖片抓取完整程式碼例項Python網頁
- JavaScript倒數計時JavaScript
- 商城倒數計時
- div前後翻轉效果程式碼例項
- CSS3旋轉效果程式碼例項CSSS3
- 線上直播系統原始碼,預設倒數計時,自定義輸入時間倒數計時原始碼
- Dreamweaver網頁製作教程:表格設計例項網頁
- 微信小程式之倒數計時元件微信小程式元件
- canvas繪製網格程式碼例項Canvas
- 時間日期格式化程式碼例項
- 倒數計時34天
- 倒數計時2天!
- 倒數計時1天
- 倒數計時2天