web前端：第四次作业

最新推荐文章于 2024-12-23 11:16:14 发布

爷们的秘密

最新推荐文章于 2024-12-23 11:16:14 发布

阅读量204

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_75043119/article/details/137979827

版权

本文介绍了如何使用JavaScript、HTML和CSS实现随机点名功能，包括随机显示名字并控制按钮状态；同时展示了如何创建一个简单的秒表计时器，包含开始、暂停和重置功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、结合抽奖案例完成随机点名程序，要求如下:
1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名
3.样式请参考css及html自由发挥完成。

代码实现：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        .box {
            position: relative;
            box-sizing: border-box;
            margin: 50px auto;
            border: 2px solid #ccc;
            padding: 20px;
            width: 500px;
            height: 200px;
            text-align: center;
        }
 
        .box h3 {
            line-height: 75px;
        }
 
        .box button {
            position: absolute;
            bottom: 30px;
            width: 60px;
            height: 30px;
        }
 
        .box .start {
            left: 130px;
        }
 
        .box .over {
            right: 130px;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <h2>随机点名</h2>
        <h3>姓名：张三</h3>
        <button class="start">开始</button>
        <button class="over">结束</button>
    </div>
    <script>
        const arr = ['张三', '李四', '王五', '蔡徐坤', '陈立农', '范丞丞', '林彦俊','王琳凯','朱正廷','王子异','王龙']
 
        const h3 = document.querySelector('.box h3')
        const start = document.querySelector('.start')
        const over = document.querySelector('.over')
 
        let timer
 
        let rand
 
        start.addEventListener('click', () => {
            start.disabled = 1
            over.disabled = 0
            timer = setInterval(() => {
                rand = Math.floor(Math.random() * arr.length)
                h3.innerHTML = `姓名：${arr[rand]}`
            }, 100);
        })
 
        over.addEventListener('click', () => {
            start.disabled = 0
            over.disabled = 1
            clearInterval(timer)
            //数组长度为 1 时，禁用按钮
            if (arr.length === 1)
                start.disabled = over.disabled = 1
            else
                arr.splice(rand, 1)
        })
 
    </script>
</body>
 
</html>

实验结果：

二、使用js及html、css完成秒表计时器，要求如下:
1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0
提示：采用定时器及定义计数器变量完成，定时器间隔为1s

代码实现：

HTML：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表</title>
    <link rel="stylesheet" href="D:\de\作业文件\web\web7.css">
</head>

<body>
    <div id="bor">
        <div id="show">
            00:00:00        
        </div>
        <div id="btnWarp">
            <button id="start">开始</button>
            <button id="stop">暂停</button>
            <button id="reset">复位</button>
        </div>
    </div>

    <script src="D:\de\作业文件\web\web6.js"></script>
    
</body>

</html>

css：

#bor {
    width: 200px;
    height: 300px;
    margin: auto;
    margin-top: 100px;
    border: black solid 1px;
    background-color: cornflowerblue;
}

#show {
    width: 100px;
    line-height: 40px;
    margin: 40px auto;
    /*background-color: blueviolet;*/
    text-align: center;
    font-size: larger;
}

#start,#reset,#stop{
    width: 100px;
    height: 30px;
    margin: 10px;
    color: white;
    border-color: wheat;
    background-color: black;
}

#btnWarp {
    text-align: center;
}

js：

function $(something) {
    return document.querySelector(something);
}

let i = 0;
let isCounting = false;
let time = $('#show');
let intervalID = undefined;

let double = function (m) {
    return m < 10 ? `0${m}` : `${m}`;
}

let show = function (t, sh) {
    t.innerHTML = sh + '';
}

let showTime = function (n) {
    const hour = parseInt(n / 360);
    const min = parseInt(n / 60) % 60;
    const sec = n % 60;
    return `${double(hour)}:${double(min)}:${double(sec)}`;
}

$('#start').onclick = function () {
    if (isCounting) {
        return
    }
    isCounting = true;
    intervalID = setInterval(function () {
        i++;
        show(time, showTime(i));
    }, 1000);
}

$('#stop').onclick = function () {
    isCounting = false;
    clearInterval(intervalID);
}

$('#reset').onclick = function () {
    isCounting = false;
    clearInterval(intervalID);
    i = 0;
    show(time, showTime(i));
}

实验结果：