javascript元素循环插入效果代码实例
这样的效果不知道实际应用中是否多见,不过可以通过代码实例学习一下相关的操作。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" gb2312"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .in{ height:20px; line-height:20px; width:20px; background-color:blue; text-align:center; color:white; } </style> <script type=text/javascript> window.onload = function () { var oList = document.getElementById('list'); var oAdd = document.createElement('li'); oAdd.className = "in"; oAdd.style.cssText = 'background-color:red;border-radius:50%'; oList.insertBefore(oAdd, null); var num = -1; var max = oList.children.length; function incrementNumber() { num++; oList.insertBefore(oAdd, oList.getElementsByTagName('li')[num]); if (num == max) { num = -1; } if (num == 0) { num = 1; } setTimeout(incrementNumber, 1000); } setTimeout(incrementNumber, 1000); } </script> </head> <body> <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in">4</li> <li class="in">5</li> <li class="in">6</li> </ul> </body> </html>
上面的代码中,红色的小球可以循环插入元素之间的空白位置,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function () {},文档内容完全加载完毕再去执行函数中的代码。
(2).var oList = document.getElementById('list'),获取id属性值为list的元素对象。
(3).var oAdd = document.createElement('li'),动态创建一个li元素对象。
(4).oAdd.className = "in",设置li元素的class属性值为in。
(5).oAdd.style.cssText = 'background-color:red;border-radius:50%',再为元素设置指定的样式,背景色为红色,圆角。
(6).oList.insertBefore(oAdd, null),首先插入列表的末尾。
(7).var num = -1,声明一个变量并赋值为-1。
(8).var max = oList.children.length,获取olist元素下子元素的集合。
(9).function incrementNumber() {},此函数实现循环插入效果。
(10).num++,加1操作。
(11).oList.insertBefore(oAdd, oList.getElementsByTagName('li')[num]),在指定索引的li元素前面插入oAdd元素。
(12).if (num == max) {
num = -1;
}
if (num == 0) {
num = 1;
},如果num的值等于max,那么就将num值重置为-1。
如果num值等于0,那么num值设置为1。
(13).setTimeout(incrementNumber, 1000),使用地柜的方式不断调用函数本身。
二.相关阅读:
(1).document.createElement()可以参阅document.createElement()一章节。
(2).className可以参阅js className一章节。
(3).cssText可以参阅javascript cssText一章节。
(4).insertBefore()可以参阅javascript insertBefore()一章节。
(5).children可以参阅javascript children一章节。
(6).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(7).setTimeout()可以参阅setTimeout()一章节。