第四次作业

一、结合抽奖案例完成随机点名程序，要求如下:
1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名
3.样式请参考css及html自由发挥完成。
二、使用js及html、css完成秒表计时器，要求如下:
1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0
提示：采用定时器及定义计数器变量完成，定时器间隔为1s

1.随机点名

始化变量和数组：
设置标志位flag为false，表示点名未开始。
初始化包含姓名的数组awards。
获取DOM元素：
获取用于显示点名结果的show元素。
获取用于触发点名开始/停止的start元素。
获取可能用于改变样式的box元素。
定义定时器变量：
初始化timer变量，用于存储定时器的ID。
实现点击事件处理函数：
当点击start元素时，执行change函数。
在change函数中，根据flag的值控制点名的开始和停止。
如果flag为false（点名未开始）：
设置flag为true。
更改start元素的文本为"停止点名"。
使用setInterval启动定时器，每隔一段时间随机选择并显示一个姓名，并可能改变box元素的样式。
如果flag为true（点名已开始）：
设置flag为false。
更改start元素的文本为"开始点名"。
使用clearInterval停止定时器。
还原box元素的样式。

2.秒表计时器

获取DOM元素：
通过document.getElementById方法获取页面上的计时器显示元素、开始按钮、暂停按钮和重置按钮
初始化变量：
设置一个定时器ID变量，用于存储定时器的引用。
初始化秒（seconds）、分（minutes）和时（hours）的计数器为0。
设置一个标志位来跟踪计时器是否正在运行，初始值为false。
定义updateTimer函数：
这个函数用于更新计时器显示元素的内容。它使用模板字符串将时、分、秒格式化为"HH:MM:SS"的形式，并赋值给timerElement的innerText属性。
定义startTimer函数：
如果计时器当前没有运行，则开始计时器。
设置isRunning为true表示计时器开始运行。
使用setInterval方法设置一个每秒执行的定时器，每次执行时秒数加1。
当秒数达到60时，将秒数重置为0，分钟数加1。如果分钟数也达到60，则将分钟数重置为0，小时数加1。
每次秒数、分钟数或小时数变化时，都调用updateTimer函数更新计时器显示。
定义pauseTimer函数：
如果计时器正在运行，则暂停计时器。
设置isRunning为false表示计时器暂停。
使用clearInterval方法清除之前设置的定时器。
定义resetTimer函数：
无论计时器是否正在运行，都重置计时器。
设置isRunning为false表示计时器已重置。
使用clearInterval方法清除之前设置的定时器（如果存在）。
将秒数、分钟数和小时数都重置为0。
调用updateTimer函数更新计时器显示为"00:00:00"。
添加事件监听器：
为开始按钮添加点击事件监听器，当点击时调用startTimer函数。
为暂停按钮添加点击事件监听器，当点击时调用pauseTimer函数。
为重置按钮添加点击事件监听器，当点击时调用resetTimer函数。