window.onload和3的小遊戲
阿新 • • 發佈:2018-11-27
window.onload出現的原因?
我們都知道頁面的程式碼順序是從上往下進行載入,很多時候我們要對頁面中的某一個模組進行操作,這時候我們常常使用javascript程式碼來進行操作。為了能夠保證操作的模組或物件在js程式碼之前就載入了,我們不得不把js程式碼放在頁面的底端。但是我們在設計頁面的時候,為了把js程式碼放在一起,或者一個讓頁面更加簡潔的位置,那就有可能出現程式碼中操作的物件未被載入的情況,那麼我們該如何去解決呢?這時候window.onload就被有了存在的意義了。
window.onload是什麼?
window.onload是一個事件,在文件載入完成後能立即觸發,並且能夠為該事件註冊事件處理函式。將要對物件或者模組進行操作的程式碼存放在處理函式中。即:window.onload =function (){這裡寫操作的程式碼};
發生要對物件進行,而物件還未被載入,導致相當於無操作的例項:
編碼
3的小遊戲,練習使用迴圈和條件語句,實現如下需求:
- 從1到100,以此在console輸出各數字,但是,當數字為3的倍數或者含有3的時候,輸出“PA”
- 比如:1,2,PA,4,5,PA,……,11,PA,PA,14,PA……
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <meta http-equiv="X-UA-Compatible"content="IE=edge"> 7 <title>3的小遊戲</title> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 </head> 10 11 <body> 12 13 <script> 14 window.onload = function game() { 15 var c = 100; 16 for (i = 1; i <= c; i++) { 17 if (i % 3 == 0 || String(i).indexOf("3") >= 0) { 18 console.log("PA"); 19 continue; 20 } else { 21 console.log(i); 22 } 23 } 24 } 25 </script> 26 </body> 27 28 </html>