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

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

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);
}

如果大家觉得有用的话,可以关注我下面的微信公众号,极客李华,我会在里面更新更多行业资讯,企业面试内容,编程资源,如何写出可以让大厂面试官眼前一亮的简历,让大家更好学习编程,我的抖音,B站也叫极客李华。

相关文章
|
14天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
5天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
7天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
22 10
|
8天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
13 0
|
9天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
9天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
16天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
17天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0
|
21天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
16 0