前端學習代碼實例-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 頁面跳轉效果