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

最新推荐文章于 2024-07-18 08:08:15 发布

weixin_30340745

最新推荐文章于 2024-07-18 08:08:15 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cheryshi/p/7815717.html

本文介绍了一种使用HTML和JavaScript实现网页数字动态加载的方法。通过设置定时器，使页面上的数字从0递增到预设值，增加了网页的交互性和观感体验。同时，介绍了如何通过document对象获取页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

会从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

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