写了一个抽奖功能的小demo 练一下随机数，点击循环到随机的数字，上代码。

有两把刷子

已于 2023-10-30 10:36:36 修改

阅读量379

点赞数 1

分类专栏：小案例、小demo 文章标签： css3 css html javascript

于 2021-11-09 19:54:06 首次发布

本文链接：https://blog.csdn.net/qq_54753561/article/details/121235407

版权

小案例、小demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现逻辑的具体步骤

1.   在HTML部分，有一个包含抽奖元素的容器div和一个用于显示抽奖结果的h1元素。

2.   CSS部分定义了容器div和抽奖元素的样式，以及一些其他样式。

3.   JavaScript部分首先使用querySelectorAll()方法选择所有的抽奖元素，并将其存储在变量div中。

4.   接下来，使用querySelector()方法选择开始抽奖的按钮，并将其存储在变量start中。

5.   使用querySelector()方法选择h1元素，并将其存储在变量h1中。

6.   定义一个变量flag，用于标记抽奖是否正在进行中。

7.   给开始抽奖的按钮添加一个点击事件监听器。当按钮被点击时，会执行一个回调函数。 8.   在回调函数中，首先检查flag变量的值。如果flag为true，说明抽奖正在进行中，直接返回，不执行后续代码。

9.   将flag设置为true，表示抽奖开始。

10.   禁用开始抽奖的按钮，防止重复点击。

11.   使用Math.random()方法生成一个随机数，并使用Math.ceil()方法向上取整，得到一个1到8之间的整数，将其存储在变量idx中。这个数表示中奖的位置。

12.   定义一个变量i，用于追踪当前抽奖元素的位置。

13.   使用setInterval()方法创建一个定时器，每100毫秒执行一次回调函数。

14.   在回调函数中，首先移除所有抽奖元素的active类，以清除之前的样式。

15.   将当前抽奖元素添加active类，以突出显示。

16.   将i加1，以便下一次循环时显示下一个抽奖元素。

17.   检查i是否等于idx，如果是，则表示抽奖结束。清除定时器，启用开始抽奖的按钮，将flag设置为false。

18.   最后，将h1元素的innerHTML属性设置为抽奖结果的文本，使用模板字符串将中奖位置插入到文本中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .active {
        background-color: red;
    }

    button {
        width: 100%;
        height: 100%;
    }

    .box {
        width: 482px;
        height: 486px;
        position: relative;
        margin: 10px auto;
        box-shadow: 0 0 4px 6px rgb(95, 92, 92);
    }

    .box div {
        width: 160px;
        height: 160px;
        border: 1px solid rgb(218, 18, 18);
        position: absolute;
    }

    .box div:nth-child(2) {
        left: 50%;
        transform: translateX(-50%);
        border-right: 0;
        border-left: 0;

    }

    .box div:nth-child(3) {
        right: 0;
    }

    .box div:nth-child(4) {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        border-top: 0;
    }

    .boox {
        width: 160px;
        height: 160px;
        border: 1px solid rgb(218, 18, 18);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-right: 0;
        border-left: 0;
        border-top: 0;
    }

    .box div:nth-child(6) {

        border-top: 0;

        right: 0;
        bottom: 0;
    }

    .box div:nth-child(7) {
        bottom: 0;
        left: 50%;
        border-right: 0;
        border-left: 0;
        border-top: 0;

        transform: translateX(-50%);

    }

    .box div:nth-child(8) {

        left: 0;
        bottom: 0;
        border-top: 0;


    }

    .box div:nth-child(9) {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border-top: 0;
        border-right: 0;
    }

    .active {
        background-color: red;
    }

    h1 {
        text-align: center;
    }

    button {
        border: 3px solid rgb(44, 222, 228);

    }
</style>

<body>
    <h1 id="h1">你还没开始抽奖哦！点击下面抽奖吧</h1>
    <br>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <ul class="boox"><button class="start">开始抽奖</button></ul>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
<script>
    var div = document.querySelectorAll('.box div')
    var start = document.querySelector('.start')
    var h1 = document.querySelector('#h1')
    // 获取元素
    var flag = false
    start.onclick = function () {

        if (flag) {
            return
        }
        flag = true
        start.disabled = true
        var idx = Math.ceil(Math.random() * 24) // 的1-8的数字
        // ceil() 方法将数字向上舍入为最接近的整数，并返回结果
        //Math.random() 函数返回一个浮点数,  伪随机数在范围从0到小于1
        var i = 0
        let js = setInterval(() => {
            for (let i = 0; i < div.length; i++) {
                div[i].classList.remove('active')
            }
            div[i % 8].classList.add('active')
            i++
            if (idx == i) {
                clearInterval(js)
                start.disabled = false
                flag = false
            }

        }, 100);
        h1.innerHTML = `恭喜你中了${idx % 8 ? idx % 8 : '8'}等奖`
    }
</script>

</html>

有两把刷子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
写了一个抽奖功能的小demo 练一下随机数，点击循环到随机的数字，上代码。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫