兩種抽獎功能實現(走馬燈)

今天做了兩種抽獎的走馬燈功能, 一般來說, 抽獎的獎品是通過后台返回回來的, 不過因為是自己做的一個小demo, 因此就直接封裝成了對象, 自己往對象里面傳值實現抽獎

 先來看一下第一種, 先上HTML和CSS

<div id="b_circle">
   <div  id="b_circle_c">
     <img src="./1.png" alt="">
   </div>
   <div id="s_circle"><div class="arrow"></div></div>
</div>

    #b_circle {
      width: 500px;
      height: 500px;
      margin: 100px auto;
      border: 1px solid #ccc;
      border-radius: 50%;
      position: relative;
    }
    #b_circle_c {
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      border-radius: 50%;
      transform: rotate(0deg);
    }
    #s_circle {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: red;
      border-radius: 50%;
    }
    .arrow {
      width: 3px;
      height: 80%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -40px;
      background-color: blue;
    }
    img {
      width: 100%;
    }

我做的轉盤抽獎的答題思路就是, 利用transform中的rotate屬性, 以及transition的過度效果, 為轉盤添加旋轉動畫, 下面是JS代碼:

  function Rotate (ele,num) {
    this.box = document.getElementById(ele)
    this.start = document.getElementById('s_circle')
    this.timer = null   //定時器
    this.endDe = 0    //第一次定時器旋轉結束時的角度
    this.count = 0    //利用開閉原則, 防止多次點擊抽獎
    this.start.onclick = () => {
      if(this.count === 0) {
        this.count=1
        this.roll(num)
      }
    } 
  }

  Rotate.prototype.roll = function(num) {
   //讓裝盤旋轉三圈加上獎品對應的度數
    this.box.style.transform="rotate("+(1440+ num*45-20)+"deg)"
    this.box.style.transition="all 9s cubic-bezier(0,0,0.25,1)"this.timer = setTimeout(()=>{    //轉完之后, 讓轉盤的旋轉角度變為獎品對應的度數, 並賦值給endDe變量
      this.count=0
      this.box.style.transition=""
      this.endDe =  this.box.style.transform.slice(7,this.box.style.transform.indexOf('d'))%360
      this.box.style.transform="rotate("+this.endDe+"deg)"
      switch(true){
        case this.endDe<=45:
          alert("一等獎")
          break
        case this.endDe<=90:
          alert("二等獎")
          break
        case this.endDe<=135:
          alert("三等獎")
          break
        case this.endDe<=180:
          alert("四等獎")
          break
        case this.endDe<=225:
          alert("五等獎")
          break
        case this.endDe<=270:
          alert("六等獎")
          break
        case this.endDe<=315:
          alert("七等獎")
          break
        case this.endDe<=360:
          alert("八等獎")
          break   
      }
    },90000)
  }

  var rotate = new Rotate('b_circle_c',6)

效果如圖:

 

第二種抽獎: 

<div id="box">
    <ul id='ul'>
      <li class="li">1</li>
      <li class="li">2</li>
      <li class="li">3</li>
      <li class="li">4</li>
      <li class="li1" id="chou">點擊</li>
      <li class="li">6</li>
      <li class="li">Iphone全家桶</li>
      <li class="li">8</li>
      <li class="li">9</li>
    </ul>
</div>

#box {
    width: 400px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    background-color: pink;
  }    
  #ul {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .li,.li1 {
    width: 30%;
    height: 30%;
    background-color: skyblue;
    list-style: none;
  }
  .chose {
    background-color: #fff;
  }

第二種抽獎的思路就是通過添加和刪除類名, 來實現移動的效果, 同樣也是用定時器, 當點擊抽獎的時候, 觸發定時器, 讓一個元素高亮, 再通過回調自身, 來循環實現這種效果, JS代碼如下: 

function Chose (ele,num) {
    this.box = document.getElementById(ele),
    this.li = document.getElementsByClassName('li')
    this.cli = document.getElementById('chou')
    this.timer = null
    this.speed = 50   //定時器觸發的速度
    this.count = 0;   //計數變量
    this.cli.onclick = ()=>{
      let date = new Date().getTime()
      this.move(num,date)
    }
  }

    Chose.prototype.move = function(num,date) {
    this.timer = setTimeout(()=>{
        let date2 = new Date().getTime()
        let j = this.count    //因為元素的順序,並不是環形的, 所以這里設置一個變量j, 來設置正確的高亮元素
        for(let i=0; i<this.li.length;i++) {
          this.li[i].classList.remove("chose");
        }
        switch(this.count) {
          case 3:
            j = 4
            break
          case 4:
            j = 7
            break
          case 5:
            j = 6
            break
          case 6:
            j = 5
            break  
          case 7:
            j = 3
            break 
        }
        this.li[j].classList.add("chose");
        this.count++
        if(this.count > 7 ) {
          this.count = 0
        }
        if(date2-date>2000){    //如果時間大於2秒, 則讓速度慢下來
          this.speed +=30 
          if(num-1 === j && date2-date>5000){   //如果時間大於5秒, 並且轉到了獎品項上, 則停止計時器
            setTimeout(()=>{
              alert(this.li[j].innerText)
　　　　　　　　 this.speed = 50
            },0)
            return
          }
        }
        this.move(num,date)
      },this.speed)
      
  }
  var chose = new Chose('box', 6)

效果圖如下: