SOURCE

console 命令行工具 X clear

                    
>
console
     var manArr=[
            {'gender':'男','age':20,'name':'小米','avater':'./images/playheader.jpg'},
            {'gender':'女','age':21,'name':'小李','avater':'./images/playheader.jpg'},
            {'gender':'男','age':22,'name':'小明','avater':'./images/playheader.jpg'},
            {'gender':'女','age':23,'name':'小丽','avater':'./images/playheader.jpg'},
            {'gender':'男','age':24,'name':'小民','avater':'./images/playheader.jpg'},
            {'gender':'女','age':25,'name':'小蛮','avater':'./images/playheader.jpg'},
            {'gender':'女','age':20,'name':'小理','avater':'./images/playheader.jpg'},
            {'gender':'女','age':21,'name':'小松','avater':'./images/playheader.jpg'},
            {'gender':'男','age':23,'name':'小宋','avater':'./images/playheader.jpg'},
            {'gender':'女','age':22,'name':'小美','avater':'./images/playheader.jpg'},
        ]
        var str='',len=manArr.length;
        for(var i=0;i<len;i++){
            str+='<div class="list_box">'+
            '<img src="../images/playheader.jpg" alt="">'+
            '<p>名字:'+manArr[i].name+'</p>'+
            '<p><span>性别:'+manArr[i].gender+'</span> <span>年龄:'+manArr[i].age+'</span></p>'+
        '</div>'
        };
        $('.list').html(str);
        var box=document.getElementsByClassName('list_box');
        var index=0;
        $('body').on('click','.btn button',function(){
               var time=parseInt(Math.random()*2+1);
                var timer=setInterval(function(){
                        $(box[index]).addClass('active').siblings().removeClass('active');
                         index+=1;
                        if(index==len-1){
                            index=0;
                        }
                },time*100)
                setTimeout(function(){
                    clearInterval(timer);
                },3000)
        })
    <div class="list"></div>
    <div class="btn">
        <button>开始选人</button>
    </div>
        .list{
            width: 1000px;
            height: 400px;
            box-sizing: border-box;
            /* border: 1px solid red; */
            margin: 0 auto;
            display: flex;
            margin-top: 50px;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .list_box{
            width: 180px;
            height: 160px;
            box-sizing: border-box;
            text-align: center;
        }
        .list_box img{
            width: 100px;
            height: 60px;
            margin-top: 10px;
        }
        .btn{
            text-align: center;
        }
        .btn button{
            margin: 0 auto;
            width: 120px;
            height: 30px;
            background: rebeccapurple;
            color: antiquewhite;
        }
        button::before{
            border: 0;
            outline-color:none;
        }
        .active{
            background: red;
            color: #fff;
        }

本项目引用的自定义外部资源