基于insertBefore制作简单的循环插空效果

这是一个基于insertBefore制作简单的循环插空效果，实现的数字下面循环插空效果，给需要的朋友分享。

效果图展示：

源码查看

【功能说明】

　　利用insertBefore制作简单的循环插空效果

【HTML代码说明】

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>

【CSS代码说明】

.in{ height: 20px; line-height: 20px; width: 20px; background-color: blue; text-align: center; color: white; }

【JS代码说明】

var oList = document.getElementById('list'); //新增一个li元素 var oAdd = document.createElement('li'); //设置新增元素的css样式 oAdd.className = "in"; oAdd.style.cssText = 'background-color:red;border-radius:50%'; //添加到oList中 oList.insertBefore(oAdd,null); var num = -1; var max = oList.children.length; function incrementNumber(){ num++; //oList.getElementsByTagName('li')[max]相当于null，所以不报错 oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]); if(num == max){ num = -1; } if(num == 0){ num = 1; } setTimeout(incrementNumber,1000); } setTimeout(incrementNumber,1000);

好了，以上就是本文的全部内容，代码很简单吧，相信大家都可以看得懂，需要的朋友可以参考下本文，希望大家喜欢。

您可能感兴趣的文章: