javaScript+CSS+html【练习题】随机点名器

辣辣写代码_nanaProgrammer

于 2020-09-18 21:17:22 发布

阅读量4.8k

点赞数 10

文章标签： js css html javascript

本文链接：https://blog.csdn.net/qq_39455275/article/details/108673101

版权

本文介绍如何使用HTML、CSS和JavaScript来创建一个随机点名器。点名器初始页面包含一个开始按钮，点击后，预先设定的人员名单会随机滚动显示，开始按钮变为停止按钮。点击停止按钮时，滚动停止并显示被随机选中的姓名。

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

题目

为了活跃班级气氛，在班级上张老师想通过一个随机点名器来随机抽取学员回答问题，故按排你来使用 HTML+JavaScript 来实现如下图所示的随机点名器，第一张图是随机点名器的初始页面，当点击开始按钮时，JS 程序中提前准备好人员（数组）名单会随机变换跳动显示，开始按钮变成了停止按钮，如第二张图显示，当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，如第三张图所示。
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名器</title>
    <style>
        div,button{
    margin:0px;padding:0px;}
        #interface{
    
            width: 400px;
            height: 300px;
            background-color: aqua;
            border-radius: 10%