web前端-homework js随机点名&秒表计时器

一、结合抽奖案例完成随机点名程序，要求如下:

1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止

2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名

3.样式请参考css及html自由发挥完成。

html源码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <style>
        .container{
            width: 500px;
            height: 300px;
            border: 1px dashed #333;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding-top: 50px;
        }
        .name-display {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 100px;
        }
        #start-stop-btn {
            width: 150px;
            height: 50px;
            background-color: #3498db;
            border: none;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="name-display" id="nameDisplay">点击开始点名</div>
        <button id="start-stop-btn">开始点名</button>
    </div>

    <script>
        var students = ["张三", "李四", "王五"];
        var nameDisplay = document.getElementById("nameDisplay");
        var startStopBtn = document.getElementById("start-stop-btn");
        var flag = false;
        var timer;

        startStopBtn.onclick = function() {
            if (!flag) {
                // 将标志变量置为true，表示进入点名状态
                flag = true;
                startStopBtn.innerHTML = "停止点名";
                // 启动定时器，每100ms随机选取一个名字显示
                timer = setInterval(pickRandomName, 100);
            } else {
                // 将标志变量置为false，表示停止点名
                flag = false;
                startStopBtn.innerHTML = "开始点名";
                // 清除定时器，停止随机选取名字
                clearInterval(timer);
            }
        };
        
        // 随机选取名字的函数
        function pickRandomName() {
            var randomIndex = Math.floor(Math.random() * students.length);
            var randomName = students[randomIndex];
            nameDisplay.textContent = randomName;
        }
    </script>
</body>
</html>

效果：

二、使用js及html、css完成秒表计时器，要求如下:

1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置

2.点击开始，面板开始计时，

3.点击暂停，面板停止

4.点击重置，计时面板重新为0

提示：采用定时器及定义计数器变量完成，定时器间隔为1s

html源码：

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表计时器</title>
    <style>
        .container{
            width: 600px;
            height: 300px;
            border: 1px dashed #333;
            position: absolute;
            left: 50%;
            top: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
            line-height: 100px;
        }
        #display {
            font-size: 36px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        button {
            width: 80px;
            height: 40px;
            margin: 5px;
            font-size: 16px;
            background-color: #3498db;
            border: none;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="display">00:00:00</div>
        <button id="start">开始</button>
        <button id="pause">暂停</button>
        <button id="reset">重置</button>
    </div>

    <script>
        var timer;
        var isRunning = false;
        var seconds = 0, minutes = 0, hours = 0;

        function startTimer() {
            isRunning = true;
             // 每秒更新一次时间
            timer = setInterval(updateTime, 1000);
        }
        
        // 暂停计时器
        function pauseTimer() {
            isRunning = false;
            clearInterval(timer);
        }
        
        // 重置时间
        function resetTimer() {
            isRunning = false;
            clearInterval(timer);
            seconds = 0;
            minutes = 0;
            hours = 0;
            updateDisplay();
        }
        
        // 更新时间
        function updateTime() {
            seconds++;
            if (seconds === 60) {
                seconds = 0;
                minutes++;
                if (minutes === 60) {
                    minutes = 0;
                    hours++;
                }
            }
            updateDisplay();
        }

        // 更新显示时间
        function updateDisplay() {
            var display = document.getElementById('display');
            // 设置显示内容
            display.textContent = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
        }

        function pad(val) {
            // 如果val大于9，返回val，否则返回'0' + val
            return val > 9 ? val : '0' + val;
        }

        document.getElementById('start').addEventListener('click', function() {
            if (!isRunning) {
                startTimer();
            }
        });

        document.getElementById('pause').addEventListener('click', function() {
            if (isRunning) {
                pauseTimer();
            }
        });

        document.getElementById('reset').addEventListener('click', function() {
            resetTimer();
        });
    </script>
</body>
</html>

效果：