js实现简易版本圆盘、矩形抽奖

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

昨天玩了一下积分抽奖，结束后，突然想自己实现一下,vue写的

圆盘抽奖

效果图

代码

html部分：

     <div class="circle" >
      <div class="bg" v-bind:style="{ transform:`rotate(${edg}deg)`,transition:'transform 4s'}"></div>
       <div class="circle-inner" @click="rotateCircle">
         <div class="circle-tran" ></div>
       </div>
    </div>

js部分：

rotateCircle(){
      this.edg = 120 + 360*2;  
},

css部分：

.circle {
  width:290px;
  height:290px;
  border-radius:100%;
  border:10px solid #000;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.bg {
  background-image:url('./assets/bg.jpeg');
  background-size:100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.circle-inner {
  width:90px;
  height:90px;
  border-radius:100%;
  background:gold;
  border:5px solid #fff;
  position:relative;
  z-index:100;
}
.circle-tran {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 40px solid gold;
  position:absolute;
  top:-35%;
  left:40%;
}

说明

这里圆盘抽奖主要是利用了css的transform和transition的属性，点击中间按钮，背景图片转动，rotate函数里写了转动的度数

矩形抽奖

效果图

代码

html部分

    <div class="square">
      <div class="square-1">
        <div class="square-2" :class="{ active: this.count % 8 === 0}">奖品1</div>
        <div class="square-2" :class="{ active: this.count % 8 === 1}">奖品2</div>
        <div class="square-2" :class="{ active: this.count % 8 === 2}">奖品3</div>
      </div>
      <div class="square-1">
        <div class="square-2" :class="{ active: this.count % 8 === 7}">奖品4</div>
        <div class="square-2 tran-btn" @click="()=>this.squareRotate(16)">抽奖</div>
        <div class="square-2" :class="{ active: this.count % 8 === 3}">奖品5</div>
      </div>
      <div class="square-1">
        <div class="square-2" :class="{ active: this.count % 8 === 6}">奖品6</div>
        <div class="square-2" :class="{ active: this.count % 8 === 5}">奖品7</div>
        <div class="square-2" :class="{ active: this.count % 8 === 4}">奖品8</div>
      </div>
    </div>

js部分

    squareRotate(num){
      if(this.count>=num){
       return;
      }else{
        this.count += 1;
        setTimeout(async()=>{
           await this.squareRotate(num);
        },100)
      } 
    },

css部分

.square {
  position:relative;
}
.tran-btn {
  background:gold;
  color:#f00;
}
.active {
  background:pink;
  opacity:0.2;
}

说明

主要是利用激活背景图片来实现的，在点击抽奖时，传入一个值，用这个值this.count % 8 ，可以用来确定要转几圈，最后停留在哪一个奖品上

总结

这两个圆盘比较简单，主要利用css的属性来实现，如需真正的投入使用，还需做一系列的优化，该文章也主要是用来记录一下思路