web前端练习三

重启服务！！！

已于 2024-04-22 09:29:31 修改

阅读量338

点赞数 2

文章标签：前端

于 2024-04-22 08:51:07 首次发布

本文链接：https://blog.csdn.net/ANCHG_/article/details/137976886

版权

本文介绍了使用HTML和JavaScript编写的两个功能：随机点名程序，通过点击按钮随机选择学生姓名；以及秒表计时器，包含开始、暂停和重置功能，每秒更新计时。

摘要由CSDN通过智能技术生成

一.随机点名程序

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <style>
        .container{
            width: 800px;
            height: 540px;
            border: 1px solid black;
            text-align: center;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            line-height: 100px;
            background-color: bisque;
        }
        .box,.box2{
            width: 400px;
            height: 400px;
            background-color: rgb(176, 243, 204);
            border-radius: 50%;
            margin: auto;
            margin-top: 50px;
            line-height: 400px;
        }
        .box2{
            background-color: rgb(124, 172, 218);
        }
        #start{
            width: 100px;
            height: 40px;
            background-color: pink;
            color: black;
        }
        #show{
            font-size: 40px;
            font-weight: bold;
        }
    </style>
</head>
<body>
     <div class="container">
        <div class="box" id="box">
            <span id="show">崩铁2021班</span>
        </div>
        <button id="start" onclick="A()">开始</button>
     </div>
</body>
</html>
<script>
    var flag = false

    var awards = ["镜流","卡夫卡","希儿","布洛妮娅","黑天鹅","霍霍","克拉拉","真理医生","白露","砂金","瓦瓦卡夏","知更鸟"]

    var box = document.getElementById("box")
    var show = document.getElementById("show")
    var start = document.getElementById("start")

    var timer

    function A(){
        if(!flag){
            flag = true
            start.innerHTML="停止"
            timer = setInterval(function(){
                let index = Math.floor(Math.random()*awards.length)    
                show.innerHTML = awards[index]
                box.setAttribute("class","box2") 
            },10)
        }else{
            flag = false
            start.innerHTML="点名"
            clearInterval(timer)
            box.setAttribute("class","box")
        }
    }
</script>

二.秒表计时器

1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时
3.点击暂停，面板停止
4.点击重置，计时面板重新为0提示:采用定时器及定义计数器变量完成，定时器间隔为1s

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表计时器</title>
    <style>
        body {  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: 100vh;  
            background-color: #f5f5f5;  
            font-family: Arial, sans-serif;  
        }  
  
        .timer-panel {  
            text-align: center;  
        }  
  
        button {  
            margin: 10px;  
            padding: 10px 20px;  
            font-size: 16px;  
        }
    </style>
</head>
<body>  
    <div class="timer-panel">  
        <h1 id="timer">00:00</h1>  
        <button id="startBtn">开始</button>  
        <button id="pauseBtn">暂停</button>  
        <button id="resetBtn">重置</button>  
    </div>  
</body>  
</html>
<script>
    let timerId = null; // 用于存储定时器的ID  
    let counter = 0; // 计数器变量  
    let isRunning = false; // 计时器是否正在运行  
  
    const timerElement = document.getElementById('timer');  
    const startBtn = document.getElementById('startBtn');  
    const pauseBtn = document.getElementById('pauseBtn');  
    const resetBtn = document.getElementById('resetBtn');  
  
    function updateTimerDisplay() {  
        const minutes = Math.floor(counter / 60);  
        const seconds = counter % 60;  
        timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;  
    }  
  
    function startTimer() {  
        if (!isRunning) {  
            isRunning = true;  
            timerId = setInterval(() => {  
                counter++;  
                updateTimerDisplay();  
            }, 1000);  
        }  
    }  
  
    function pauseTimer() {  
        if (isRunning) {  
            isRunning = false;  
            clearInterval(timerId);  
        }  
    }  
  
    function resetTimer() {  
        counter = 0;  
        updateTimerDisplay();  
        if (isRunning) {  
            pauseTimer();  
        }  
    }  
  
    startBtn.addEventListener('click', startTimer);  
    pauseBtn.addEventListener('click', pauseTimer);  
    resetBtn.addEventListener('click', resetTimer);
</script>