标签:
【功能说明】
利用removeChild制作简单的倒序删除效果
【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代码说明】
<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后执行函数incrementNumber setTimeout(incrementNumber,1000); </script>
【效果展示】
利用removeChild制作简单的倒序删除效果【jsDEMO】
标签:
原文地址:http://www.cnblogs.com/xiaohuochai/p/4824782.html