18年7月13日课堂随笔

实现功能点击停止并删除当前姓名，当所有全部删除后提示完成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>随机点名器</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .outer{
            width: 400px;
            height: 350px;
            /*background:red;*/
            margin: 10px auto;
        }
        #name{
            width: 300px;
            height: 250px;
            margin: 10px auto;
            text-align: center;
            line-height: 250px;
            font-size: 60px;
            color:red;
        }
        button{
            display: block;
            width: 100px;
            height: 50px;
            font-size: 25px;
            text-align: center;
            margin: 200px auto 0;
        }
    </style>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="outer">
    <div id="name">准备！ </div> 
    <button class="button">开始</button>
</div>
</body>
<script type="text/javascript">

    var timer;
    var divs=$("#name");
    var btn=$(".button");
    var flag=true,timer=null;
    var arr=["纪毅宁","苏庆东","王冠","邹涵实","范锐新","李永辉","于佳铎","何庆宇","何佳斌","石宇航","田媛","徐闯"];//姓名数组
    var num = arr.length-1; //数组长度
    btn.click(function(){
        if (flag) {

            timer=setInterval(function(){
                a = ram();
                //console.log(arr[a]);
                divs.html(arr[a]);
            },20)
            btn.html("停止");
            flag=false;
        }else{
            arr.splice(a,1);
            console.log(a);
            console.log(arr);
            btn.html("开始");
            clearInterval(timer);
            flag=true;
            if(arr.length == 0){
                alert("点完了");
            }
        }
    });
    function ram(min,max){
        return x=Math.floor(Math.random()*arr.length);
    }
</script>
</html>

18年7月13日课堂随笔

猜你喜欢