【Java】html 简易点名器_随机点名器_抽奖器

1. 在Idea中创建一个html文件，用浏览打开，即是一个点名器

2.源代码如下

<!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>
</head>
<body>
<div class="outer">
    <div id="name"></div>
    <button>开始</button>    //创建一个按键
</div>
</body>
<script type="text/javascript">
    var divs=document.getElementsByTagName('div')[1];
    var btn=document.getElementsByTagName("button")[0];
    var flag=true,timer=null;
    var arr=["朱茵","王祖贤","戚薇","陈乔恩","胡歌","水野朝阳","江疏影","宋冬野","杨幂","允儿"];         //参与点名的人员
    btn.onclick=function(){
        if (flag) {
            timer=setInterval(function(){
                divs.innerHTML=ram();
            },20)
            btn.innerHTML="停止";
            flag=0;
        }else{
            clearInterval(timer);
            btn.innerHTML="开始";
            flag=true;
        }
    }
    function ram(){
        var x=Math.floor(Math.random()*arr.length);
        var result=arr[x];
        return result;
    }
</script>
</html>

【Ending】

技术，只有在交流的时候才能理解的更透彻！交流Java开发技术，我们正在行动！感谢来过！

【Java】html 简易点名器_随机点名器_抽奖器

猜你喜欢