隨機點名器

1.代碼html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隨機點名器</title>
    <link rel="icon" href="http://caiyanli.top/images/cai.gif">
    <style>
        .box,.zhu{
            width:500px;
            margin:auto;
            
        }
        .box>div,button{
            width:500px;
            height: 200px;
            vertical-align:middle;
            text-align:center;
            border:1px solid #ccc;
            font-size: 50px;
            color:#f03;
            display:block;
        }
        a{
            text-decoration: none;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cai " id="cai">隨機點名器</div>
        <button onclick="gotoRand()" id="btn">開 始</button>
     </div>
     <div class="zhu"><a href="http://caiyanli.top">跳轉至主頁</a></div>
     <script>
    //聲明 全部的人名 組成的數組
    var nameList = ['蘇媛','陳露','王豔','王菲菲','陶正祥','彭文磊','袁傑','林凡浩','馮思玲','蔡嚴麗','顧思語','朱才華','陳喬','郭東文','餘海濤','程鵬睿','許辰辰','馬飛雄','方煒','姜熠傑','林程彪','錢宇陽','張春霞','張豔','胡振東','李文賽','金曉鵬','王強','許夢約','潘雨霞','林敏敏','陳姍姍','鍾普偉','夏舟浩','夏洋濤','蔣豪','崔煒林','施可慧','張億雯','沈銘晗','錢振宇','範子棟','王振','姚逍遙','閆壯壯','馬偉東','毛麗華','唐錦輝','張霖淇','王濤','陳陽陽','陳凡','黃祿波','閆華傑','田偉凱','蔣超','朱希強','餘德炳','付智御','劉曉','金陸坤','陳瀚祥','伍必成','李景旭','陳士採','陳日平','王慧萍','趙學江','張海濤','姚廣磊','宋潔','陳方盛','黃國威','陳垟垟','鄭姚敏','張甜'];
    //聲明時間的變量
    var timer = null;
    //開始 隨機的函數
    function gotoRand(){
        //獲取button 元素
        var button = document.getElementById('btn');
        //判斷 是開始仍是結束
        if (timer === null) {
            //開啓定時
            timer = setInterval(getName, 100);
            //把button的內容改掉
            button.innerHTML = "暫 停";
        } else {
            //清除定時
            clearInterval(timer);
            //修改button的內容
            button.innerHTML = "開 始";
            //把timer賦值爲null
            timer = null;
        }
    }
    //隨機獲取姓名函數
    function getName(){
        //取隨機數
        var index = Math.floor(Math.random() * 10000000 % nameList.length);
        //取出姓名放入 div中
        document.getElementById('cai').innerHTML = nameList[index];
    }
    </script>
</body>
</html>
View Code

 

2.隨機點名器數組

相關文章
相關標籤/搜索