zoukankan      html  css  js  c++  java
  • 纯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

  • 相关阅读:
    Cocos2d-x之绘制圆形
    Cocos2d-x之绘制填充矩形
    Cocos2d-x之绘制矩形
    Cocos2d-x之绘图API说明
    cocos2d-x之监听手机的物理按键
    cocos2d-x之加速度传感器
    cocos2d-x之多点触摸事件
    cocos2d-x之事件传递(onTouchBegan的返回值的作用)
    pickle
    配置文件
  • 原文地址:https://www.cnblogs.com/cheryshi/p/7815717.html
Copyright © 2011-2022 走看看