簡體   English   中英

關於JavaScript中的window.onload

[英]Regarding window.onload in javascript

我正在介紹一個javascript類,在我們的其中一個實驗中,我們被指示在頭部分僅包含一個 script標簽,但因window.onload事件處理程序而延遲。

我可以正常工作了,但我的問題是為什么我的imageManipulator()函數僅在執行window時才起作用。onload= function(){imageManipulator()}; 而另外兩個在沒有{}的情況下工作正常。

同樣,對於我的if語句遍歷曲棍球隊的原因,為什么== 0不起作用? 我以為0是true -1是false,所以不是== 0而不是> = 0嗎?

我的代碼在這里:

<html>
<head>
<script>
    function christmasDayCalculation()
    {
        var currentDate = new Date();
        var christmas = new Date(2016, 11, 25);

        var ms = christmas - currentDate;
        var seconds = ms / 1000;
        var minutes = seconds / 60;
        var hours = minutes / 60;
        var days = hours / 24;

        alert(Math.round(days) + " days until christmas");
    }

    function hockeyTeams()
    {
        var hockeyTeams = ['Anaheim Ducks', 'Arizona Coyotes', 'Calgary Flames', 'Edmonton Oilers', 
                       'Los Angeles Kings', 'San Jose Sharks', 'Vancouver Canucks', 'Colorado Avalanch',
                       'Dallas Stars', 'Minnesota Wild', 'St.Louis Blues', 'Winnipeg Jets', 'Boston Bruins', 
                       'Buffalo Sabres', 'Detroit Redw Wings', 'Florida Panthers', 'Montreal Canadiens', 
                       'Ottowa Senators', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Colombus Blue Jackets', 
                       'New Jersey Devils', 'New York Islanders', 'New York Rangers', 'Philadelphia Flyers', 
                       'Pittsburgh Penguins', 'Washington Capitals']

        for(i = 0; i < hockeyTeams.length; i++)
        {
            if(hockeyTeams[i].indexOf("an") >= 0)
            {
                alert(hockeyTeams[i]);
            }
        }
    }

    function imageManipulator()
    {
        var numberOfImages = document.images.length;

        for(i = 0; i < numberOfImages; i++)
        {
            document.images[i].style.border = "solid red"; // DOM 0 required per lab instructions
            document.getElementsByTagName("img")[i].style.width = "100px"; // DOM 1 required per lab instructions
        }
    }

    window.onload = christmasDayCalculation();
    window.onload = hockeyTeams();
    window.onload = function() { imageManipulator() };
</script>
</head>
<body>
    <img src="cat.jpg">
    <img src="dog.jpg">
    <img src="bird.jpg">
</body>
</html>

謝謝!

window.onload運行某些內容,以確保在函數運行之前將加載所有DOM元素。 如果函數訪問或修改DOM,則需要使用它。

christmasDayCalculation()hockeyTeams()不會訪問DOM,因此不需要在window.onload運行。 加載窗口時,實際上並沒有運行它們,因為您沒有在它們周圍放置function() 當你做

window.onload = hockeyTeams();

它立即運行該函數,然后將其返回的值分配給window.onload

當你寫

window.onload = function() { imageManipulator(); };

那不會立即運行imageManipulator() ,而是會創建一個函數來調用它。 您還可以編寫:

window.onload = imageManipulator;

請注意,函數名稱后沒有() 這會將變量設置為對該函數的引用,而不是調用該函數。

最后,多次分配給window.onload沒有意義。 這是一個單一屬性,只能容納一個值。 重復的分配將替換先前的值,並且在加載文檔時,它將僅執行最后一個值。 如果要執行多項操作,則應將它們組合為一個函數:

window.onload = function() {
    christmasDayCalculation();
    hockeyTeams();
    imageManipulator();
};

對於第二個問題, indexOf()返回找到的元素在數組中的位置;如果未找到, indexOf()返回-1 因此,如果您使用== 0 ,則對於New York Islanders來說將不是真的,因為indexOf()返回12而不是0 indexOf不返回true / false值,它返回一個頭寸。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM