基于insertBefore制作简单的循环插空效果
更新时间：2015年09月21日 11:30:38 投稿：mrr
这是一个基于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);
好了，以上就是本文的全部内容，代码很简单吧，相信大家都可以看得懂，需要的朋友可以参考下本文，希望大家喜欢。
相关文章
这篇文章主要介绍了浅析js实现网页截图的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Date() 日期对象是一个构造函数必须使用new来调用创建我们的日期对象,本文给大家介绍JS中的Date()使用小结,感兴趣的朋友一起看看吧2024-01-01
本文主要介绍了js跨域的几种解决方案,主要介绍了8种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
这篇文章主要为大家详细介绍了JavaScript实现HSL拾色器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章介绍了JS图片切换的具体方法，有需要的朋友可以参考一下2013-11-11
最近改了一个公司项目,新增加了一个获取用户手机号功能,里面用到了关于获取用户信息和用户手机号的功能,下面这篇文章主要给大家介绍了关于微信小程序登录方法之授权登陆及获取微信用户手机号的相关资料,需要的朋友可以参考下2022-07-07
大家都知道在ES7中有了标准的回调函数嵌套的解决方案，新增了 async/await两个关键词，所以这篇文章主要给大家介绍了关于Javascript中如何利用Await减少回调嵌套的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-11-11
今天小编就为大家分享一篇layer弹出层 iframe层去掉滚动条的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js，程序源代码如下，感兴趣的朋友可以参考下哈2013-06-06
这篇文章主要为大家详细介绍了微信小程序实现课程选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论