原生html,css,js 模拟实现抽奖功能（排它思想的运用）

最新推荐文章于 2024-10-24 16:52:37 发布

a416laji

最新推荐文章于 2024-10-24 16:52:37 发布

阅读量486

点赞数 2

CC 4.0 BY-SA版权

文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/a416laji/article/details/131292079

本文介绍了如何使用原生html、css和javascript模拟抽奖功能，重点在于排它思想的实现。作者分享了实现思路，包括通过定时器和变量模拟for循环，为当前索引的抽奖元素添加选中样式，并逐步清除其他元素的样式。虽然只有静态效果展示，但提供了优化建议，期待读者提出改进意见。

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

闲着无聊想起以前同事遇到的一个抽奖功能，突发恶疾想着自己用原生实现。虽然网上有很多案例，但是自己想思路和实现还是比较有意思的，话不多说，直接上代码。

html:

<div class="wrapper">
        <div class="item active">
            1
        </div>
        <div class="item">
            2
        </div>
        <div class="item">
            3
        </div>
        <div class="item">
            4
        </div>
        <div class="item">
            5
        </div>
        <div class="item" id="six">
            6
        </div>
        <div class="item" id="seven">
            7
        </div>
        <div class="item" id="eight">
            8
        </div>
        <div class="item" id="nine">
            9
        </div>
        <div class="item" id="ten">
            10
        </div>
        <div class="item" id="eleven">
            11
        </div>
        <div class="item" id="twl">
            12
        </div>
        <div class="item" id="thirth">
            13
        </div>
        <div c