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

极客李华

已于 2024-02-01 00:54:16 修改

阅读量5k

点赞数 15

分类专栏： JS学习之旅文章标签： javascript html css

于 2023-01-20 19:02:10 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/128743077

版权

JS学习之旅专栏收录该内容

55 篇文章 4 订阅

订阅专栏

作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
座右铭：未来是不可确定的，慢慢来是最快的。
个人主页：极客李华-CSDN博客
合作方式：私聊+
这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

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

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

效果展示
在这里插入图片描述

抽奖方式：

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

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

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

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

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

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

藏宝图
具有设计感的小纸粘在杯碟椅子等地方上，在开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嵌套结构 -->
<div class="outher">
    <div class="wapper">
        <div class="left">
            <!-- 一边4个选项 -->
                <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

let wapper = document.querySelector(".wapper");

    let textAll = document.querySelectorAll(".wapper .text");

    // 这里是奖项的名字
    let prize = ["1号大奖","2号大奖","3号大奖","4号大奖","5号大奖","6号大奖","7号大奖","未中奖"];
    
    // 权重数组 不同奖项的权重值，权重越高越容易中这个区域
    let prizeWeight = [1,3,5,7,10,15,20,30];
    
    //  权重之和
    let weightSum = prizeWeight.reduce(function(prevValue,curVal){
        return prevValue + curVal;
    });


    for(let i = 0 ; i < textAll.length ; i++){
            textAll[i].innerHTML = prize[i];  
    }

    let isFlag = true;

        document.querySelector(".circle").onclick=function(){
            console.log(123);
        if(isFlag){
            
        // 生成权重随机数 生成数的范围是【1,30】
        // 这里需要注意的是，这个30要和最上面的prizeWeight的最后一个值对应
        let weightRandom = parseInt(Math.random()*30);
        // 合并
        let concatAfterArr = prizeWeight.concat(weightRandom);
    
        // 排序
        let  sortedWeightArr  = concatAfterArr.sort(function(a,b){ return a-b });

        // randomIndex是奖项的索引 结果是【1,7】
        var randomIndex = sortedWeightArr.indexOf(weightRandom); 
        randomIndex = Math.min(randomIndex, prize.length -1); 

            // 获奖的内容
            let text = prize[randomIndex];
            
            switch(randomIndex){
                case 0:
                    run(22.5,text);
                    break;
                case 1:
                    run(66.5,text);
                    break;
                case 2:
                    run(112.5,text); 
                    break;
                case 3:
                    run(157.5,text);
                    break;
                case 4:
                    run(338.5,text);
                    break;
                case 5:
                    run(294.5,text);
                    break;   
                case 6:
                    run(247.5,text);
                    break;
                case 7:
                    run(201.5,text);
                    break;    
            }
        }
        
    };

    function run(angle,text){
    isFlag = false;
    let begin = 0; 
    let timer = null;
    let basic = 1800;
    timer = setInterval(function(){
        if(begin > (basic+angle)){
            isFlag = true;
            clearInterval(timer);
        }
        wapper.style.transform="rotate("+(begin)+"deg)";
        // 这是一个算法 可以出现转盘又很快到慢慢变慢的效果
        begin+=Math.ceil(basic+angle-begin)*0.1;
    },70);
}