网络编程
位置：首页>> 网络编程>> JavaScript>> 基于insertBefore制作简单的循环插空效果

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

作者：mrr　　发布时间：2023-08-17 22:34:17　

标签：insertBefore

效果图展示：

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

源码查看

【功能说明】

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

【HTML代码说明】


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

【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);

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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com