純JavaScript制作動態增加的網頁數字

看到別的網頁上打開，會顯示一個動態的數字，感覺這個效果增加了網頁的靈動感。就嘗試着寫代碼，最終實現的方法：

會從0增加到一個數值，實現的代碼：

<!-- html 部分   -->
<div class="number">
<div id="num1">0</div>
<div id="num2">0</div>
<div id="num3">0</div>
<div id="num4">0</div>
</div>
<!-- js部分  -->
<script type="text/javascript">
window.onload = function ()
{
    //數字自動獲取
    var oNumone = document.getElementById("num1");
    var oNumtwo = document.getElementById("num2");
    var oNumthree = document.getElementById("num3");
    var oNumfour = document.getElementById("num4");
    var i = 0;
    setInterval(updateNum, 10);
    updateNum();
    function updateNum()
    {
        if(oNumone.innerHTML<30)
            oNumone.innerHTML = ++i    
        if(oNumtwo.innerHTML<66)
            oNumtwo.innerHTML = ++i    
        if(oNumthree.innerHTML<88)
            oNumthree.innerHTML = ++i    
        if(oNumfour.innerHTML<666)
            oNumfour.innerHTML = ++i    

    }
}
</script>

 

復制上面的代碼，即可實現。
附：JS通過元素的name屬性獲取元素
使用document對象的getElementsByName（）方法可以通過元素的name屬性獲取元素，通常用於獲取表單元素。與getElementById（）方法不同的是，使用該方法的返回值是一個數組，而不是一個元素，如果想通過name屬性獲取頁面中唯一的元素，可以獲取返回數組中下標值為0的元素。
ep：
<input type="text" name="love" id="loveyou" value="sports"/>

<input type="text" name="love" id="loveyou" value="art"/>
獲取其value值：
<script language="JavaScript">
alert(document.getElementsByName("love")[0].value);
結果會輸出：sports