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()一章节。

回复

我来回复
  • 暂无回复内容