js 点名

<!doctype html>

<html>



<head>



    <meta charset="utf-8">



    <title>点人名</title>



    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>



    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>

    

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    



<style>

    h2{

        font-size: 5em;

        text-align: center;

        margin-top: 50px;

        height: 250px;

        width: 350px;

        margin: 50px auto;

        border: 1px solid #ccc;

        box-shadow: 0 0 5px #000;

        line-height: 250px;

    }

    .btn{

        text-align:center;

        

    }

    .btn input{

        padding:10px 20px;

        margin:10px 30px;

        color:#000;

    }

    .texrt{

        text-shadow: 1px 2px 4px red;

    }

</style>

</head>





<body>



    

    

    

    

    <h2 id="num">

        开始点人

    </h2>

    

    <div class="btn">

        <input type="button" value="开始" id="start"/>

        <input type="button" value="结束" id="stop"/>

    </div>

    

    

    

    

    

    

    <script>



        var arry = ['张武','赵欣','赵瑛','赵子怡','菲菲','雷囧','马季','小辣椒','龙卷风','名阿凡','秒速','艾莉婕','奥拉基'];

        var num = document.getElementById('num');

        var start = document.getElementById('start');

        var stop = document.getElementById('stop');

        var time = null;

        start.onclick=function(){

            num.className  = 'texrt';

            this.disabled=true; 

            time = setInterval(function(){

                    var n = Math.round(Math.random()*(arry.length-1));    //随机产生 0 - arry.length 之间的数字

                    num.innerHTML = arry[n];

                },50);

        };

        

        stop.onclick=function(){

            start.disabled=false; 

            clearInterval(time);

        };

        

    </script>

</body>

</html>

 

你可能感兴趣的:(js)