利用removeChild制作简单的倒序删除效果【jsDEMO】

【功能说明】
　　利用removeChild制作简单的倒序删除效果

【HTML代码说明】

<ul id="list">  <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代码说明】

<script>var oList = document.getElementById('list');function incrementNumber(){  //获取oList中子元素的个数  var len = oList.getElementsByTagName('li').length;  //如果长度不为0  if(len){    //删除最后一个子元素    oList.removeChild(oList.getElementsByTagName('li')[len-1]);    //再次调用计时器    setTimeout(incrementNumber,1000);    }}//1s后执行函数incrementNumbersetTimeout(incrementNumber,1000);</script>

【效果展示】

【源码查看】

原标题：利用removeChild制作简单的倒序删除效果【jsDEMO】

关键词：JS