当前位置:首页 » 《随便一记》 » 正文

Js实现轮盘抽奖功能,一招帮你解决选择困难症

11 人参与  2023年02月05日 11:53  分类 : 《随便一记》  评论

点击全文阅读


不知道今天自己该吃什么,一招帮你解决选择困难症。
通过html+css+js实现一个轮盘抽奖功能。我们可以将平时吃的饭菜输入到代码中,每到纠结的时候只需点开抽一次就可以了。
在这里插入图片描述

实现步骤

html代码:
整体实现的结构是一个大的圆形,分成了左右两个部分。从上面的图片中我们可以看出,我们是将整个圆形分成了八块的,实现方法就是css的旋转。

<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>

css代码:
给body设置为flex布局,设置了水平和垂直居中,让整个轮播处于屏幕的中间。

     *{         margin:0;         padding:0;     }     body{         display: flex;         justify-content: center;         align-items: center;         height: 100vh;     }

.outher是整个div块的样式设置,设置为一个圆形.
.wapper是将整个圆形分为八个部分,transform:rotate(22.5deg)定义 2D 旋转,选择了22.5deg正好使得箭头正对着每一部分的中间位置。

     .outher{         width:300px;         height: 300px;         position: relative;         border-radius: 50%;     }     .wapper{         width:300px;         height: 300px;         border-radius: 50%;         overflow: hidden;         transform:rotate(22.5deg);      }

在这里插入图片描述
整个圆的宽度为300px,分成两部分每一部分都是150px。

  .left{          position: absolute;          width: 150px;          height: 300px;          left:0;          overflow: hidden;      }   .right{          position: absolute;          width: 150px;          height: 300px;          right:0;          overflow: hidden;          text-align: center;      }

这里设置的transform-origin: right center左半部分以右侧的中心点为转轴旋转,右半部分以左侧的中心点为旋转轴旋转。第一个div块不需要旋转,两部分因分别分成了4块,所以第二个旋转的度数就是45deg,第三个就是90deg。而且给每一部分设置交叉的颜色,区分开每一块。

    .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: #F59462;    }    .right div.two{        background-color: #FC7C7B;        transform:rotate(45deg);    }    .right div.three{        background-color: #F59462;        transform:rotate(90deg);    }    .right div.four{          background-color: #FC7C7B;        transform:rotate(135deg);    } 

每一小部分中文字的样式设置,分别旋转22.5deg处于每一部分的中间位置。

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

这一部分就是中间抽奖和箭头的样式设置了。箭头就是一个三角形,位置正好处于小圆型的正中心。

    .circle{        width: 100px;        height: 100px;        background-color: white;        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 white;         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;    }

js代码:
在抽奖的过程中,不允许再次点击就设置了一个isFlag,只有当isFlag=true点击的时候才会触发后面的事件。生成一个随机数random,然后再执行switch函数,然后执行相应的run函数,run函数传递两个参数angle角度,text[random]随机的一种菜。

  let wapper = document.querySelector(".wapper");        let textAll = document.querySelectorAll(".wapper .text");        let text = ["黄焖鸡","麻辣烫","蛋炒饭","烧烤","火锅","热干面","牛排","螺蛳粉"];        for(let i = 0 ; i < textAll.length ; i++){                textAll[i].innerHTML = text[i];          }        let isFlag = true;         document.querySelector(".circle").onclick=function(){             if(isFlag){                let random = parseInt(Math.random()*8)                switch(random){                    case 0:                        run(22.5,text[random]);                        break;                    case 1:                        run(66.5,text[random]);                        break;                    case 2:                        run(112.5,text[random]);                         break;                    case 3:                        run(157.5,text[random]);                        break;                    case 4:                        run(338.5,text[random]);                        break;                    case 5:                        run(294.5,text[random]);                        break;                       case 6:                        run(247.5,text[random]);                        break;                    case 7:                        run(201.5,text[random]);                        break;                    }            }            };

下面的就是run函数的定义,为了让整个轮盘多转几圈,我们先设置了一个基础角度basic=1800,可能一开始的旋转效果比较生硬,这里我们添加一个缓动动画效果,缓动动画公式 (结束位置 - 起始位置)* 缓动系数(0~1)。

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

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/52800.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1