随机点名系统（一）

最新推荐文章于 2023-01-09 16:26:24 发布

HAI6545

最新推荐文章于 2023-01-09 16:26:24 发布

阅读量604

点赞数 1

分类专栏： JavaScript案例文章标签： javascript html css

本文链接：https://blog.csdn.net/HAI6545/article/details/122134583

版权

本文介绍如何利用JavaScript、HTML和CSS创建一个简单的随机点名系统。通过JavaScript实现随机选择名单的功能，结合HTML构建用户界面，利用CSS美化点名界面，打造一个实用的课堂辅助工具。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
ul{
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    width: 488px;
    border:1px solid hotpink;
}
h1{
    text-align: center;
}
ul li{
    float:left;
    border:1px solid #0f0;
    margin:10px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
ul:after{
    content: '';
    display: block;
    clear: both;
}
.btn{
    width: 80px;
    height: 30px;
    outline:none;
    border:none;
    margin: 10px auto 0;
    display: block;
    background-color: #abcdef;
    cursor: pointer;
}
.active{
    background-color: hotpink;
}

</style>
<body>
    <h1>随机点名</h1>
    <ul>
        
    </ul>
    <button class="btn">开始</button>
</body>
<script>
var na