码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-09-21 01:24:54      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!