纯JavaScript制作动态增加的网页数字

绝地灬酷狼 2021-09-30 01:04 408阅读 0赞

看到别的网页上打开，会显示一个动态的数字，感觉这个效果增加了网页的灵动感。就尝试着写代码，最终实现的方法：

*![1248607-20171110170609700-1577367371.gif][]*

会从0增加到一个数值，实现的代码：

<div class="number">
    <div id="num1">0</div>
    <div id="num2">0</div>
    <div id="num3">0</div>
    <div id="num4">0</div>
    </div>
    
    <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**

转载于:https://www.cnblogs.com/cheryshi/p/7815717.html

[1248607-20171110170609700-1577367371.gif]: /images/20210725/c674c1e0d4cf4a49837ba4bfe07736c4.png