第四次作业：随机点名

最新推荐文章于 2024-07-14 15:54:59 发布

真的一点都不会

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量145

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/bb_lo/article/details/138169504

版权

本文介绍了如何用JavaScript、HTML和CSS实现一个随机点名功能，包括点击按钮切换显示随机学生姓名并控制点名/停止状态。同时，也展示了如何创建一个秒表计时器，带有开始、暂停和重置按钮，利用定时器和计数器完成计时。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <style>
        *{
            margin-left: 0px;
            margin-top: 0px;
        }
        .container{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            text-align: center;
            line-height: 100px; 
        }
        .box,.box2 {
            width: 300px;
            height: 300px;
            background-color: red;
            border-radius: 50%;
            /* 水平位置居中 */
            margin: auto;
            margin-top: 50px;
            text-align: center;
            line-height: 300px;
        }

        #show{
            font-size: 30px;
            color: white;
            font-weight: bold;
        }

        #start{
            width: 300px;
            height: 50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="container">        
        <div class="box" id="box">
            <span id="show">姓名</span>
        </div>
        <button id="start" onclick="change()">点名</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 change(){
        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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四次作业：随机点名

2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名。1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置。1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止。提示：采用定时器及定义计数器变量完成，定时器间隔为1s。3.样式请参考css及html自由发挥完成。4.点击重置，计时面板重新为0。2.点击开始，面板开始计时，3.点击暂停，面板停止。
复制链接

扫一扫