JavaScript之随机点名

最新推荐文章于 2023-08-19 15:04:38 发布

李家一只慧

最新推荐文章于 2023-08-19 15:04:38 发布

阅读量187

点赞数

分类专栏： javaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m7k7k999/article/details/128024782

版权

javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用HTML、CSS和JavaScript实现一个随机点名的滚动效果。通过点击开始按钮，姓名列表中的一个随机名字将在指定区域内滚动显示，而停止按钮则能中断滚动。代码中使用了Math.random()生成随机数来选取名字，并利用定时器实现滚动动画。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <style>
        body{
        background: #f5faff;
        }
        .start{
        width: 140px;
        line-height: 55px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        /*text-shadow: h-shadow v-shadow blur color;*/
        text-shadow:2px 2px 2px #333;
        border-radius: 5px;
        margin:0 20px 20px 0;
        position: relative;
        overflow: hidden;
        background-color: limegreen;
        border:1px solid #d2a000;
        /*box-shadow: h-shadow v-shadow blur spread color inset;*/
        box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
        }
        #btn{
        background-color: red;
        }
        #show {
        font:90px "楷体";
        text-align: center;
        background-color: gainsboro;
        width: 60%;
        }
    </style>
</head>
<body>
<form>
    <div align="center">
        <input type="button" value="开始滚动" onclick="start()" class="start"/>
        <input type="button" value="停止滚动" onclick="stop()" class="start" id="btn"/>
        <hr color="blue">
        <br>
        <div id="show" align="center">随机点名区域</div>
    </div>
</form>
       <script>
           //获取标签
           var divNode = document.getElementById("show");
           //存储姓名
           var students = ["李","1吕2","赵3","董4","陈5","何6",
                           "任7","付佳8","庄9","刘10","刘11","曹12"];
           //定义随机姓名变量
           var randomName;
           var arr;
           //点击开始滚动事件
           function start(){
               //定时器
               arr = setInterval(function(){
                   //随机姓名
                   randomName = Math.floor(Math.random()*students.length);
                   //输出随机姓名
                   var nums = students[randomName];
                   divNode.innerHTML = nums;
               },50)
           }
           //停止滚动事件
           function stop() {
               //清除定时器
               clearInterval(arr);
           }
       </script>
</body>
</html>