看到别的网页上打开,会显示一个动态的数字,感觉这个效果增加了网页的灵动感。就尝试着写代码,最终实现的方法:
会从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