JZTXT

用html和css和js实现一个班级点名

发布时间 2023-12-06 16:14:13作者: manicX
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级点名系统</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-image: radial-gradient(circle at center, #4facfe, #00f2fe 70%, #4facfe);
            background-size: 250% 250%;
            animation: gradientAnimation 10s infinite;
        }

        #container {
            position: absolute;
            bottom: -100px;
            text-align: center;
            width: 1000px;
            height: 600px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(241, 224, 216, 1.0);
            background-color: #fff;
        }

        #studentList {
            list-style-type: none;
            padding: 0;
            margin: 0;
            border-radius: 10px;
            border: 2px solid whitesmoke ;
            width: 900px;
        }

        .names-container {
            margin: 100px auto;
            width: 900px;
            height: 400px;
            position: relative;
            text-align: center;
            backdrop-filter: blur(10px); /* 调整模糊程度 */
        }

        .name {
            height: 40px;
            width: 70px;
            margin: 5px;
            padding: 2px;
            border: 2px solid black;
            border-radius: 10px;
        }

        #result {
            position: relative;
            top: -150px;
            width: 200px;
            height: 100px;
            border: 2px solid gainsboro;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        button[disabled] {
            background-color: #aaa;
            cursor: not-allowed;
        }

        button:hover:enabled {
            background-color: #45a049;
        }

        .names-container>ul {
            float: left;
        }

        li {
            border: 2px solid #41a863;
            border-radius: 10px;
            float: left;
            margin: 5px;
            padding: 8px 12px; /* 调整内边距 */
            background: white; /* 使用与边框颜色相同的背景色 */
            text-align: center;
            width: 60px; /* 调整宽度 */
            color: #b0b0b0;
            font-weight: bold;
            box-shadow:0 2px 10px rgba(0,0,0,.15);
        }

        .btnlist {
            position: absolute;
            top: 500px;
            right: 400px;
        }

        #lucky {
            position: absolute;
            width: 150px;
            height: 40px;
            font-size: 20px;
            right: 40px;
        }
    </style>
</head>
<body>
<div id="container">
    <h1>班级点名系统</h1>
    <div class="names-container">
        <ul id="studentList">
        </ul>
    </div>
    <div class="btnlist">
        <button id="startButton">点名</button>
        <button id="stopButton">停止</button>
        <button id="resetButton">重置</button>
    </div>
    <div id="result">
        <span id="lucky"></span>
    </div>
</div>
<script type="text/javascript">
    window.addEventListener("load", function () {
        var start = document.getElementById("startButton");
        var stop = document.getElementById("stopButton");
        var reset = document.getElementById("resetButton");
        var luckyElement = document.getElementById("lucky");
        var myVar; // 声明为全局变量

        let callArr = ["学生1", "学生2", "学生3", "学生4", "学生5", "学生6", "学生7",
            "学生8", "学生9", "学生10", "学生11", "学生12", "学生13", "学生14",
            "学生15", "学生16", "学生17", "学生18", "学生19", "学生20", "学生21",
            "学生22", "学生23", "学生24", "学生25", "学生26", "学生27", "学生28",
            "学生29", "学生30", "学生31", "学生32", "学33", "学生34", "学生35",
            "学生36", "学生37", "学生38", "学生39", "学生40", "学生41", "学生42",
            "学生43", "学生44", "学生45", "学生46", "学生47", "学生48", "学生49"];

        var studentContainer = document.getElementById("studentList");
        var selectstudent=[];
        for (let i = 0; i < callArr.length; i++) {
            var li = document.createElement("li");
            li.className = "name" + i;
            li.innerHTML = callArr[i];
            studentContainer.appendChild(li);
        }

        function randomNum(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        function getRandstu(count) {
            var randomstu = [];
            var elements = document.querySelectorAll("li");

            for (var i = 0; i < count; i++) {
                var index = randomNum(0, elements.length - 1);
                var li_value = elements[index].innerHTML;

                if (!randomstu.includes(li_value)) {
                    elements[index].style.background = randomColor();
                    randomstu.push(li_value);
                }
            }
            selectstudent =randomstu;
            return randomstu;
        }
        function randomColor() {
            var r = randomNum(0, 256),
                g = randomNum(0, 256),
                b = randomNum(0, 256);
            return `rgb(${r},${g},${b})`;
        }

        function clearBackground() {
            var elements = document.querySelectorAll("li");
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.background = "";
            }
        }
        //删除li元素
        function clearStudent(){
            while(studentContainer.firstChild){ //判断是否还有子元素,没有为null
                studentContainer.removeChild(studentContainer.firstChild)
            }
        }
        //遍历增加子元素
        function addstudent(){
            //遍历callarr数组
            for(var o=0;o<callArr.length;o++){
                var li2 = document.createElement("li");
                li2.className = "name" + o;
                li2.innerHTML = callArr[o];
                studentContainer.appendChild(li2);
            }
        }

        var intervalId;

        start.onclick = function () {
            clearInterval(intervalId); // 清除之前的定时器
            intervalId = setInterval(function () {
                clearBackground();
                var luckyElement = document.getElementById("lucky");
                luckyElement.innerHTML = "幸运儿：" + getRandstu(3);

            }, 100);
        };

        stop.onclick = function () {
            clearInterval(intervalId); // 停止定时器的运行
        }
        reset.onclick = function () {
            clearInterval(intervalId);
            clearBackground();
            luckyElement.innerHTML = "";
            selectstudent.forEach(i=>{
                var index = callArr.indexOf(i);
                if(index !==-1){
                    callArr.splice(index,1)
                }
            })
            clearStudent();
            addstudent();
        }
    });




</script>
</body>
</html>

实现效果如下:

(可能存在问题,希望指出!)