js 点名

最新推荐文章于 2025-09-07 22:29:54 发布

weixin_34085658

最新推荐文章于 2025-09-07 22:29:54 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinlinux/p/4312628.html

<!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>