2. 程式人生 > 其它 >使用原生Js實現隨機點名

使用原生Js實現隨機點名

阿新 • • 發佈：2021-01-06

技術標籤：jscsshtml

使用原生Js實現隨機點名

最近學了一點前端內容，老師讓用js設計一個班裡的隨機點名器。就嘗試寫了一個，具體實現效果如圖：

在這裡插入圖片描述
實現程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <
 
title>點名</title>
    <link href="../callTheRoll/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">

</head>
<style>
    div {
        float: left;
    }
    
    button {
        background-color: moccasin;
        margin: 30px;
 

        height: 50px;
        width: 150px;
        border: rgb(245, 165, 165) 1px solid;
        font-size: 18px;
    }
    
    .wai {
        margin-left: 200px;
        width: 1300px;
    }
    
    .name {
        height: 40px;
        width: 100px;
        margin: 4px;
        padding: 10px;
        font-size
 
: 18px;
        background-color: mistyrose;
    }
</style>

<!-- onload ： 事件會在頁面或影象載入完成後立即發生。 -->
<body onload="A()">
    <div class="wai" align="center">
        <table>
            <button class="start" onclick="start()">開始</button>
            <button class="end" onclick="end()">結束</button>
        </table>
        <div id="names"></div>
    </div>

    <script type="text/javascript">
        var nameArr = [
            "空", "張家家", "許雪雪", "王橘橘", "陳韻", "馬本本", "張志志", "唐豪豪", "高洋洋", "朱陽陽", "王山山", "空",
            "尹方方", "王零零", "李遠遠", "吳傑", "李玉玉", "李雯雯", "步一一", "崔明明", "肖金金", "陳晴晴", "趙飛飛", "空",
            "李英英", "李洋陽", "劉俊郡", "王泊", "廉云云", "王子俊", "康三三", "李浩浩", "張藝藝", "徐葉葉", "李巨集巨集", "雷康康",
            "張青青", "王樂樂", "空", "楊童童", "張君君", "孫明", "何龍龍", "鄭軒軒", "任平平", "孫超超", "空", "賀濤濤",
            "空", "空", "空", "空", "熊秀秀", "薄嘉嘉", "薛萬萬", "尹飛", "張傑", "胡萬萬", "空", "馬文文"
        ];
        var index = 0;
        var k = 1; // 記錄不為空的座位

        // 生成作為表
        function A() {
            for (var i = 0; i < nameArr.length; i++) {
                if (nameArr[i].length > 1) {
                    // 建立div標籤（html元素）
                    var div = document.createElement("div");
                    div.setAttribute("class", "name");
                    div.setAttribute("id", index++ + "");
                    var text = document.createTextNode(nameArr[i]);
                    div.appendChild(text);
                    // 新增元素
                    document.getElementById("names").appendChild(div);

                    // 每排12人，所以每隔12，新增一個換行符
                    if ((i + 1) % 12 == 0) {
                        var br = document.createElement("br");
                        document.getElementById("names").appendChild(br);
                    }
                    k++; // 新增一個學生，k自增1，記錄學生（不為空的座位）個數
                } else {
                    var div = document.createElement("div");
                    div.setAttribute("class", "name");

                    //  div.setAttribute("id", index++ + "");
                    // 如果當前元素長度小於等於1時，則代表當前座位為空，所以不給當前div新增id屬性，方便後續隨機選人時，避開空座位

                    var text = document.createTextNode(nameArr[i]);
                    div.appendChild(text);
                    // 新增元素
                    document.getElementById("names").appendChild(div);
                    if ((i + 1) % 12 == 0) {
                        var br = document.createElement("br");
                        document.getElementById("names").appendChild(br);
                    }
                }

            }
        }

        // 定義一個id標誌
        var index2 = -1;

        function restore() {
            // 還原顏色
            if (index2 != -1) {
                document.getElementById(index2 + "").style.cssText = "background: mistyrose";
            }
            // 生成隨機數，用K生成隨機數，此時K代表不為空的作為個數
            var num = Math.floor(Math.random() * k);
            document.getElementById(num + "").style.cssText = "background-color:red";
            index2 = num; // 記錄當前被選中的id，在下次執行該函式時，將顏色還原
        }

        var time; // 用於接收計時器，方便關計時器時操作
        var n = 1; // 定義狀態正在執行 n=0 , 已經結束 n=1

        function start() {
            if (n == 1) {
                // DOM setInterval()方法 計時器
                time = setInterval("restore()", 80);
                n = 0;
            }
        }

        function end() {
            if (n == 0) {
                clearInterval(time);
                alert("請" + document.getElementById(index2 + "").innerHTML + "同學回答問題");
                n = 1;
            }
        }
    </script>
</body>

</html>

在這裡對計時器做一下介紹：

	setInterval(code，millisec)，這兩個引數都是必須的；
			第一個引數是要呼叫的函式或要執行的程式碼串。
			第二個引數是毫秒值，表示的是隔多久執行一次code(引數一)。
	clearInterval(id_of_setinterval)，引數是必須的；
			這個引數表示setInterval返回的ID值，即在程式碼中我設定的time

（本人是小白一個，所以寫的有什麼問題也請各位指出，可以讓我及時改正，謝謝）

相關推薦

原生js實現隨機點名

本文例項為大家分享了js實現隨機點名的具體程式碼，供大家參考，具體內容如下

使用原生Js實現隨機點名

技術標籤：jscsshtml 使用原生Js實現隨機點名 最近學了一點前端內容，老師讓用js設計一個班裡的隨機點名器。就嘗試寫了一個，具體實現效果如圖：

如何使用原生Js實現隨機點名詳解

使用原生Js實現隨機點名 最近學了一點前端內容，老師讓用js設計一個班裡的隨機點名器。就嘗試寫了一個，具體實現效果如圖：

JS實現隨機點名器

本文例項為大家分享了JS實現隨機點名器的具體程式碼，供大家參考，具體內容如下

js實現隨機點名器精簡版

本文例項為大家分享了js實現隨機點名器的具體程式碼，供大家參考，具體內容如下

js實現隨機點名功能

本文例項為大家分享了js實現隨機點名的具體程式碼，供大家參考，具體內容如下

原生JavaScript實現隨機點名表

本文例項為大家分享了JavaScript隨機點名表的具體程式碼，供大家參考，具體內容如下

js實現隨機點名

本文例項為大家分享了js實現隨機點名的具體程式碼，供大家參考，具體內容如下

原生js實現檔案上傳、下載、封裝等例項方法

一 、下載 1、程式碼 const fileDownloadClick = (obj) => { // 解決相容 if( document.all ){

原生js實現無縫輪播圖

本文例項為大家分享了js實現無縫輪播圖的具體程式碼，供大家參考，具體內容如下

原生JS實現留言板功能

本文例項為大家分享了JS實現留言板功能的具體程式碼，供大家參考，具體內容如下

原生js實現點選輪播切換圖片

本文例項為大家分享了js實現點選輪播切換圖片的具體程式碼，供大家參考，具體內容如下

原生js實現日曆效果

本文例項為大家分享了js實現日曆效果的具體程式碼，供大家參考，具體內容如下

原生JS實現螢火蟲效果

本文例項為大家分享了JS實現螢火蟲效果的具體程式碼，供大家參考，具體內容如下

原生JS實現貪吃蛇小遊戲

本文例項為大家分享了JS實現貪吃蛇小遊戲的具體程式碼，供大家參考，具體內容如下

原生js實現瀑布流效果

本文例項為大家分享了js實現瀑布流效果的具體程式碼，供大家參考，具體內容如下

原生JS實現煙花效果

原生JS實現煙花效果，點選頁面生成煙花，向四周擴散，然後再墜落下去。（這裡的煙花我是用的特殊字元愛心形狀）

原生js實現碰撞檢測

本文例項為大家分享了js實現碰撞檢測的具體程式碼，供大家參考，具體內容如下

JavaScript實現隨機點名器

本文例項為大家分享了JavaScript實現隨機點名器效果圖的具體程式碼，供大家參考，具體內容如下

原生js實現ajax請求和JSONP跨域請求操作示例

本文例項講述了原生js實現ajax請求和JSONP跨域請求。分享給大家供大家參考，具體如下：