前端學習代碼實例-JavaScript 頁面跳轉效果
阿新 • • 發佈:2019-04-27
scrip span 轉動 element 屬性 技術 html ans count 運用JavaScript,實現了在10秒之後跳轉到指定頁面。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端開發學習q群:731771211 詳細教程講解</title> <script type="text/javascript"> function countDown(secs,surl){ var jumpTo = document.getElementById(‘jumpTo‘); jumpTo.innerHTML=secs; if((secs--)>0){ setTimeout("countDown("+secs+",‘"+surl+"‘)",1000); } else{ location.href=surl; } } window.onload=function(){ countDown(10,‘http://www.softwhy.com/‘); } </script> </head> <body> <span id="jumpTo">10</span>秒後自動跳轉到http://www.softwhy.com/ </body> </html>
上面的代碼實現了我們的要求,下面介紹一下它的實現過程。
一.代碼註釋:
(1).function countDown(secs,surl){},第一個參數規定倒計時時長,第二個參數規定要跳轉的頁面。
(2).var jumpTo = document.getElementById(‘jumpTo‘),獲取id屬性值為jumpTo的元素對象。
(3).jumpTo.innerHTML=secs,設置元素的初始內容,其實就是倒計時的最初值。
(4).if((secs--)>0){ setTimeout("countDown("+secs+",‘"+surl+"‘)",1000);
},如果secs當前大於0的時候,調用setTimeout()方法,這裏是采用了遞歸的方式。
(5).else{
location.href=surl;
},否則就進行跳轉動作。
前端學習代碼實例-JavaScript 頁面跳轉效果