JS+HTML+CSS 实现课堂随机点名系统

博扬java张

已于 2023-09-23 10:29:11 修改

阅读量2.8k

点赞数 9

于 2023-03-14 13:09:13 首次发布

本文链接：https://blog.csdn.net/fyh559/article/details/129523871

版权

课堂随机点名系统

最近在学习前端的一些基础，就使用js+html实现了一个比较简单的课堂随机点名系统。效果图如下

在这里插入图片描述

源码主要分为三个部分：html、css、js

1、包含HTML文件的代码，如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名系统</title>
    <link rel="stylesheet" href="./css/randomEnhance.css">
</head>

<body>
    <div class="contain">
        <ul id="parent">
            <li id="para" class="mc">赵云</li>
        </ul>
        <div>
            <button id="btn1">开始点名</button>
            <button id="btn2">停止</button>
            <button id="btn3">重置</button>
        </div>
    </div>
    <script src="./js/randomEnhance.js"></script>
</body>

</html>

2、包含css代码。如下

* {
    margin: 0;
    padding: 0;
}

ul,
ol,
dl,
li {
    list-style: none;
}

body {
    background-image: linear-gradient(to right, skyblue, rgb(243, 163, 120));
}

.contain {
    margin: 100px auto;
    width: 800px;
    height: 400px;
    position: relative;
    text-align: center;
}

.contain>ul {
    float: left;
}

li {
    border: 1px solid black;
    border-radius: 5px;
    float: left;
    margin: 5px;
    padding: 5px 10px;
    background: #918597;
    text-align: center;
    color: white;
    width: 48px;
    box-shadow: 0px -2px 2px 0px #ccc,
        -2px 0px 2px 0px #ccc,
        2px 0px 2px 0px #ccc,
        0px 2px 2px 0px #ccc;
}

.contain>div {
    position: absolute;
    width: 380px;
    height: 60px;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: auto;
}

.contain>div>button {
    width: 100px;
    height: 40px;
    margin-left: 20px;
    font-size: 20px;
    border-radius: 10px;
    background: rgb(222, 153, 97);
}

3、包含js代码。如下

let flag = false;
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');

window.addEventListener('load', function () {
    let arr = [
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六',
        '凤翔忠',
        '张三',
        '李四',
        '赵六'
    ];
    let content = document.getElementById('parent');
    let child = document.getElementById('para');

    for (let i = 0; i < arr.length; i++) {
        var span = document.createElement("li");
        span.id = "spanid" + i;
        span.style.color = "white";
        span.innerHTML = arr[i];
        child.parentNode.insertBefore(span, child);
    }
})

function fn(a, b) {
    return Math.floor(Math.random() * (Math.abs(a - b) + 1)) + Math.min(a, b)
}

function myTimer() {
    let myNodelist = document.querySelectorAll("li");
    let rd = fn(0, myNodelist.length);
    console.log(rd);
    myNodelist[rd].style.color = "red";
    myNodelist[rd].style.background = "#faa755";
    for (let i = 0; i < myNodelist.length; i++) {
        if (i === rd) continue;
        myNodelist[i].style.color = "white";
        myNodelist[i].style.background = '#918597';
    }
}

function clearMyTimer() {
    let myNodelist = document.querySelectorAll("li");
    let rd = fn(0, myNodelist.length);
    for (let i = 0; i < myNodelist.length; i++) {
        if (i === rd) continue;
        myNodelist[i].style.color = "white";
        myNodelist[i].style.background = '#918597';
    }
}

var myVar;
btn1.onclick = function myStopFunction1() {
    clearInterval(myVar);
    myVar = setInterval(function () { myTimer() }, 100);
}

btn2.onclick = function myStopFunction2() {
    clearInterval(myVar);
}

btn3.onclick = function myStopFunction3() {
    clearInterval(myVar);
    clearMyTimer();
}