JS抽奖

最新推荐文章于 2025-07-11 15:36:48 发布

原创

最新推荐文章于 2025-07-11 15:36:48 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#抽奖 #JS #前端

如何用JS实现抽奖

抽奖思路
1、数据一、让用户看到的奖品
2、数据二、真实中奖奖品（可以控制每个奖品中将的概率；概率高的奖品数据就多）
3、点击开始抽奖时，奖品有序的增加背景色
4、再次点击同一个按钮，慢慢的中了哪个奖品就在哪里停止

html代码

<div class="wrap">

        <div class="box_1 box">
            <!-- 设置第一个初始为红色 -->
            <div class="content common parent" style="background-color:red;">再来一次</div>
            <div class="content common parent">一脚</div>
            <div class="content common parent">埃及金字塔一座</div>
        </div>

        <div class="box_2 box">
            <div class="content_2 common parent">谢谢惠顾</div>
            <!-- 设置抽奖按钮为蓝色 -->
            <div class="content_2 common " id="btn" style="background-color:blue">开始</div>
            <div class="content_2 common parent" style="position:relative;left: 413px;top: 210px;">空调</div>
        </div>

        <div class="box_3 bo