基于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)

相关推荐

  • 初学js插入节点appendChild insertBefore使用方法

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点.语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同. appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说). insertBefore 方法 是在已有的节点前

  • jQuery中append、insertBefore、after与insertAfter方法注意事项

    这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A

  • appendChild() 或 insertBefore()使用与区别介绍

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div> 例1: 复制代码 代码如下: <script

  • JavaScript之appendChild、insertBefore和insertAfter使用说明

    appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法 target.appen

  • js中AppendChild与insertBefore的用法详细解析

    appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法target.appendChil

  • 基于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=

  • 基于Vue3制作简单的消消乐游戏

    基于Vue3制作简单的消消乐游戏

    目录 游戏介绍 核心思路 核心代码 html js 游戏开始/循环 删除 下落 添加 生成矩阵/数据 点击 换位置 游戏介绍 先看一下 好吧,我知道界面有点丑 →_→ 核心思路 游戏步骤主要就是:消除.下落.补充.移动,采用三种状态来区分需要删除的(remove).新添加的(add).和正常的方块(normal) 主要就是生成小方块列表后,马上保存每一个方块上下左右方块的信息 然后判断每一个方块和上下或和左右类型相同即为需要消除,并把该方块状态改为 remove 然后通过定位改变 top 来控制

  • 基于replaceChild制作简单的吞噬特效

    基于replaceChild制作简单的吞噬特效

    效果演示图: 源   码   查   看 [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</

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • 基于Matlab制作一款简单的龙舟小游戏

    基于Matlab制作一款简单的龙舟小游戏

    效果图: 没找到合适的背景就自己画了个,大家如果有更好看的可以换一下... 步骤 1 创建Axes及图片导入 窗口创建: Mainfig=figure('units','pixels','position',[50 100 760 400],... 'Numbertitle','off','menubar','none','resize','off',... 'name','dragonBoat'); axes('parent',Mainfig,'position',[0 0 1 1],...

  • 基于JS制作一个简单的网页版地图

    基于JS制作一个简单的网页版地图

    目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管

  • 基于Matlab制作一个数独求解器

    基于Matlab制作一个数独求解器

    目录 1.完整效果 2.数独求解(错误示范) 3.数独求解(升维) 4.数字识别 5.GUI / APP 讲解一个完整的小项目,顺便说明如何使用整数规划求解数独. 1.完整效果 2.数独求解(错误示范) 首先我们先尝试如果只满足行.列.3x3块加和均为45的等式约束是否有效.即约束为: 每行和为45: 每列和为45: 每个3x3块和为45: 其中对此编写如下代码: sudokuMat=[1 0 5 0 2 0 0 0 0 0 0 0 7 4 3 0 0 5 3 0 7 0 0 0 0 0 9 0

  • 基于Vue制作组织架构树组件

    基于Vue制作组织架构树组件

    由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vue).在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子! 分析 既然是树,那么每个节点都应该是相同的组件 节点下面套节点,所以节点组件应该是一个 递归组件 那么,问题来了.递归组件怎么写? 递归组件 Vue官方文档是这样说的: 组件在它的模板内可以递归地调用自己.不过,只有当它有 name 选项时才可以这么做 接下来,我们来写一个树节点递归组件: <template> <div c

  • c#基于winform制作音乐播放器

    c#基于winform制作音乐播放器

    前言:项目是c#的winform 写的,使用的播放器是基于AxWindowsMediaPlayer. AxWindowsMediaPlayer的方法 1 首先新建一个页面 如图所示: 图片左侧是列表 使用listview 右侧是背景图片.图片框框的地方是后面可以实现的,+和-按钮分别代表添加文件和删除文件 还有就是控制播放的顺序.下面的分别是修改歌词的字体 和展示/隐藏 2 新建一个透明的歌词页面[窗体] 3 新建一个半透明的页面[窗体] 4 业务代码 using System; using S

  • iOS基于AVFoundation 制作用于剪辑视频项目

    iOS基于AVFoundation 制作用于剪辑视频项目

    目录 项目效果图 功能实现 一.选取视频并播放 二.按帧获取缩略图初始化视频轨道 三.视频指定时间跳转 四.播放器监听 五.导出视频 最近做了一个剪辑视频的小项目,踩了一些小坑,但还是有惊无险的实现了功能. 其实 Apple 官方也给了一个 UIVideoEditController 让我们来做视频的处理,但难以进行扩展或者自定义,所以咱们就用 Apple 给的一个框架 AVFoundation 来开发自定义的视频处理. 而且发现网上并没有相关的并且比较系统的资料,于是写下了本文,希望能对也在做

随机推荐