HTML/CSS/JS实现随机点名与秒表计时器实例-CSDN博客

本文链接：https://blog.csdn.net/weixin_57304642/article/details/138200810

【Web】第四次

一、结合抽奖案例完成随机点名程序，要求如下:
二、使用js及html、css完成秒表计时器，要求如下:

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

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

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

1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名
3.样式请参考css及html自由发挥完成。

代码实现
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>随机点名</