JS实现抽奖器

最新推荐文章于 2022-04-24 15:45:19 发布

缺氧何甘酸

最新推荐文章于 2022-04-24 15:45:19 发布

阅读量700

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_46113894/article/details/109250905

版权

本文介绍了如何利用JavaScript的setInterval函数来实现一个抽奖器。通过设置计时器并结合clearInterval来控制抽奖过程的开始和结束。同时需要注意，getElementsByClassName方法返回的是一个元素集合，需要指定序号才能操作特定元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS实现抽奖器

setInterval（）函数设置计数器，第一个参数放函数，第二个放毫秒值为让其结束让setInterval（）函数返回一个标志timer，然后 clearInterval(timer)
注意：getElementsByClassName()返回的是数组，要加序号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .wapper{
        border:2px solid red;
        text-align: center;
        margin: 0 auto;
        width: 50%;
        border-radius: 10px;
        height: 300px;
    }
    .top{
        line-height: 35px;
        color: red;
        background: #FFC0CB 5px 5px;
    }
    button{
        border-radius: 8px;
        background: #01a1ff;
        margin-top: 10px;
        color: white;
        padding: 10px 15px;
    }
    button:hover{
        border-radius: 8px;
        background: black;
        margin-top: 10px;
        color: white;
        padding: 10px 15px;
    }
</style>
<body>
   <div class="wapper">
       <div class="top">开始抽奖了！</div>
       <button class="butt-start">开始</button>
       <button class="butt-stop">停止</button>
   </div>
   <script> //7个谢谢参与，2个鼠标，1个耳机
    var gifts=[
        "蓝牙耳机",
        "谢谢参与",
        "谢谢参与",
        "无线鼠标",
        "谢谢参与",
        "谢谢参与",
        "无线鼠标",
        "谢谢参与",
        "谢谢参与",
        "谢谢参与",
    ];
    var gift=document.getElementsByClassName("top")[0];
    var start=document.getElementsByClassName("butt-start")[0];
    var stop=document.getElementsByClassName("butt-stop")[0];
    var timer=null;
    //设置计时器，没10毫秒换一次
   start.onclick=function(){
       timer=setInterval( function () {
           gift.innerHTML=gifts[Math.floor(Math.random()*gifts.length)]
       },10)
   };

   //停止，清除计时器
    stop.onclick=function(){
        clearInterval(timer);
    }

   </script>
</body>
</html>

在这里插入图片描述