html+css+js实现带有转盘的抽奖小程序

叁歲伎倆 2024-03-27 08:45 58阅读 0赞

## html+css+js实现带有转盘的抽奖小程序 ##

**简介**：html+css+js实现带有转盘的抽奖小程序。

**效果展示**  
![在这里插入图片描述][ceeb7e77bd1f470f85b65f400140a2ee.png]

**抽奖方式**：

**飞镖**  
飞镖制作成飞机的模样，没人的号码用黄色标签做成云朵模样黏贴在背景板上，年会背景板缓缓移动，飞扎中的名字得奖寓意飞黄腾达。

**福利彩票机**  
年会入场嘉宾人手一张自制。

**可以哒云抽奖**  
创建抽奖活动后，扫描活动二维码，推广二维码，最后在拿出手机抽奖。

**转盘抽奖**  
数字，转动三次构成一组百位数，号码对应者获奖。随着号码的逐一产生，现场配合音响效果能创造出激动人心的效果。

**摘红包**  
把个人的电话号码写于纸上放在红包里，年会上领导随机摘取一个，然后打电话给获奖人。悬念十足，气氛紧张。

**捞金**  
由年会上领导在箱子里放入一定数额的大额人民币，其余人用一元的纸币写上自己的名字或号码，放多少个人而定，放越多机会越多。（主持强调，付出越多收获越大）领导抽出中奖人再从准备好的三个信封抽出一个，三个信封内为：一只手，两只指，一双筷子等，然后自行捞取现金。最后被抽中的人所有奖金都归他。

**藏宝图**  
具有设计感的小纸粘在杯碟椅子等地方上，在开party前，一张藏宝图分2份对开的，上边写着礼品号码，礼分2份的就是个号码有2分的，其中一分是真的，一分是假的，当他们找好藏宝图后必然要找另一半藏宝图才可以对奖的，在找藏宝图时就可以互动作用了，不过号码里的礼品一定要放点好玩的东西的（奶瓶，尿不湿）也放点大奖的啦，当同一张小纸合起来，就可以上换奖了，也可以拿了藏宝图的一对人交换藏宝图的，那时就会出很多笑话了。例如有人的藏宝图只找到半张纸时，他可能会看领导的杯杯碟碟的。强调团队合作的重要性。

本文采取的是转盘抽奖：

### 实现代码 ###

#### index.html ####

<!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>
        <link href="./style.css" type="text/css" rel="stylesheet">
    </head>
    <style>
    
    </style>
    <body>
        
    
    <div class="outher">
        <div class="wapper">
            <div class="left">
                
                    <div class="one"> <span class="text"></span></div>
                    <div class="two"> <span class="text"></span></div>
                    <div class="three"> <span class="text"></span></div>
                    <div class="four"> <span class="text"></span></div>
            </div>
            <div class="right">
                <div class="one"> <span class="text"></span></div>
                <div class="two"> <span class="text"></span></div>
                <div class="three"> <span class="text"></span></div>
                <div class="four"> <span class="text"></span></div>
            </div>
         
          </div>
          
          <div class="circle">
                 抽奖
         </div>
    </div>
    
    <script src="style.js"></script>
    
    </body>
    </html>

#### style.css ####

*{
        
        margin:0;
        padding:0;
    }
    
    body{
        
        /* 让div盒子放到屏幕中间 */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    
    .outher{
        
        width:300px;
        height: 300px;
        position: relative;
        border-radius: 50%;
    }
    
    .wapper{
        
        width:300px;
        height: 300px;
        border-radius: 50%;
        overflow: hidden;
        background-color: black;
        transform:rotate(22.5deg);
     }
    
     .left{
        
         position: absolute;
         width: 150px;
         height: 300px;
         left:0;
         overflow: hidden;
     }
    
     .left .text{
        
         position: absolute;
         top:30px;
         left:55%;
         transform:rotate(-22.5deg);
         text-align: center;
     }
    
     .right .text{
        
         position: absolute;
         top:25px;
         left:11%;
         transform:rotate(22.5deg);
         text-align: center;
     }
    
     
     .right{
        
         position: absolute;
         width: 150px;
         height: 300px;
         right:0;
         overflow: hidden;
         text-align: center;
     }
    
    
     .left div{
        
       position: absolute;
       top:0;
       left:0;
       width: 100%;
       height: 100%;
       transform-origin: right center;
    }
    
    .left div.one{
        
       background-color: #FC7C7B;
    }
    
    
    .left div.two{
        
       background-color: #F59462;
       transform:rotate(-45deg);
    }
    
    .left div.three{
        
       background-color: #FC7C7B;
       transform:rotate(-90deg);
    }
    
    .left div.four{
        
       background-color: #F59462;
       transform:rotate(-135deg);
    } 
    
    
    .right div{
        
       position: absolute;
       top:0;
       left:0;
       width: 100%;
       height: 100%;
       transform-origin: left center;
    }
    
    
    .right div.one{
        
       background-color: #FC7C7B;
    }
    
    
    .right div.two{
        
       background-color: #F59462;;
       transform:rotate(45deg);
    }
    
    .right div.three{
        
       background-color: #FC7C7B;;
       transform:rotate(90deg);
    }
    
    .right div.four{
        
     
       background-color: #fff;
       transform:rotate(135deg);
    } 
    
    .circle{
        
       width: 100px;
       height: 100px;
       background-color:#f2552e ;
       position: absolute;
       left:50%;
       top:50%;
       transform:translate(-50%,-50%);
       border-radius: 50%;
       text-align: center;
       line-height: 100px;
       font-size: 30px;
       font-weight: bold;
       cursor: pointer;
       user-select: none;
    }
    
    .circle:after{
        
        width: 0;
        height: 0;
        border:40px solid #f2552e ;;
        border-left-width: 10px;
        border-right-width: 10px;
        position: absolute;
        content:"";
        border-left-color: transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        top:-70px;
        left:calc(50% - 10px);
        z-index: -1;
    }

#### style.js ####

[ceeb7e77bd1f470f85b65f400140a2ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/868125afaa464aa88fd18dacb59605d3.png