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

【功能说明】
　　利用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>

【效果展示】

【源码查看】