js考核第三题 - 技术栈

题三：随机点名

要求：分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示五十位群成员的学号和姓名，控制区域由开始和结束两个按钮组成。点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的学号和姓名。

html 部分

html 复制代码

<body>
    <div class="display">
        <ul class="list"></ul>
    </div>
    <div class="anliu">
        <button class="start">开始</button>
        <button class="stop">结束</button>
    </div>

css部分

css 复制代码

<style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .display {
            flex: 1;
            overflow: hidden;
            background-color: #f0f0f0;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
        }
        @keyframes scroll {
            0% {
                top: 0;
            }
            100% {
                top: -100%;
            }
        }
        .list {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .list li {
            padding: 10px;
            font-size: 18px;
            border-bottom: 1px solid #ccc;
        }
        .anliu {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 20px;
            background-color: #ddd;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;/*变成小手*/
            border: none;
            background-color: green;
            color: white;
            border-radius: 5px;
        }

        button:hover {
            background-color: red;
        }
    </style>

js部分

javascript 复制代码

<script>
        document.addEventListener('DOMContentLoaded', function () {
            const list = document.querySelector('.list');
            const start = document.querySelector('.start');
            const stop = document.querySelector('.stop');

            const yb = [
                { id: '23120901', name: '姜怡雯' },
                { id: '23210204', name: '付煜舒' },
                { id: '23210210', name: '岳含旭' },
                { id: '23210310', name: '赵可' },
                { id: '23210406', name: '施紫涵' },
                { id: '23210408', name: '郑欣妍' },
                { id: '23210605', name: '李晶靓' },
                { id: '23210606', name: '马诗雨' },
                { id: '23210610', name: '杨嘉润' },
                { id: '23220125', name: '薛睿' },
                { id: '23220204', name: '陆萧彦' },
                { id: '23220418', name: '李华勇' },
                { id: '23220422', name: '王翰铭' },
                { id: '23220426', name: '徐新洪' },
                { id: '23220506', name: '张盼' },
                { id: '23220607', name: '张婉玉' },
                { id: '23220623', name: '王学潮' },
                { id: '23220705', name: '石一汝' },
                { id: '23220714', name: '高俊宇' },
                { id: '23230101', name: '陈思静' },
                { id: '23230102', name: '高紫怡' },
                { id: '23230103', name: '李嘉慧' },
                { id: '23230104', name: '李思怡' },
                { id: '23230205', name: '唐艺文' },
                { id: '23240101', name: '季雅雯' },
                { id: '23240207', name: '吕倩雨' },
                { id: '23240301', name: '周婉愉' },
                { id: '23240412', name: '郑伯熙' },
                { id: '23240426', name: '孙致远' },
                { id: '23250316', name: '顾成志' },
                { id: '23250411', name: '朱逸倩' },
                { id: '23320515', name: '崔齐鑫' },
                { id: '24110319', name: '范熠阳' },
                { id: '24121002', name: '钱姝澄' },
                { id: '24121309', name: '向文杰' },
                { id: '24210110', name: '任焯琳' },
                { id: '24210119', name: '卜家文' },
                { id: '24210214', name: '许成晨' },
                { id: '24210319', name: '钱岩' },
                { id: '24210414', name: '刘志豪' },
                { id: '24210512', name: '郑鸿强' },
                { id: '24210609', name: '倪张睿' },
                { id: '24210702', name: '冯雅琳' },
                { id: '24210704', name: '李晓熙' },
                { id: '24210716', name: '魏冕' },
                { id: '242108111', name: '盛健翔' },
                { id: '24210822', name: '周锦浩' }
            ];

            function showMembers() {
                let htmlContent = '';
                for (let i = 0; i < yb.length; i++) {
                    const currentYb = yb[i];
                    htmlContent += `<li>学号：${currentYb.id},姓名：${currentYb.name}</li>`;
                }
                list.innerHTML = htmlContent;
            }

            function startScroll() {
                list.style.animation = 'scroll 1s linear infinite'; 
            }

            function stopScroll() {
                list.style.animation = 'none';
                const randomIndex = Math.floor(Math.random() * yb.length);
                const randomYb = yb[randomIndex];
                list.innerHTML = `<li>学号：${randomYb.id}，姓名：${randomYb.name}</li>`;
            }

            start.addEventListener('click', startScroll);
            stop.addEventListener('click', stopScroll);

            showMembers();
        });
    </script>

视频：

js第三题