求一个vue大转盘抽奖

xy12 发表于 2021-5-29 17:15

萌新求一个vue大转盘抽奖，前后端或者纯前端都可以奖品有5个

sundeheng 发表于 2021-5-29 17:39

网页吗？uniapp的要不要

cube 发表于 2021-5-30 10:05

HTML    <div id="app">
            <div class="box">
                     <ul>
                           <li v-for="i,index in items" @click="index==4 && fun1()" :style="index==4 && 'cursor:pointer'" :class="{active:index==active, top:active!=4&&!run}">
                                    {{index==4?run?'...':'开始':i}}
                           </li>
                     </ul>
            </div>
   
   </div>

CSS
body {
   background: #303030;
   color: white;
   font-size: 2.5rem;
}

.prize {
   border-radius: 4%;
   border: 1px #454545 solid;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #303030;
   height: 360px;
   line-height: 360px;
   text-align: center;
   width: 400px;
}

ul {
   overflow: hidden;
   width: 400px;
   margin-bottom: -10px;
   margin-top: 0;
   background: none;
}

li {
   margin: 1px;
   list-style: none;
   float: left;
   width: 99px;
   height: 99px;
   line-height: 99px;
   border: 1px solid #6b6464;
   text-align: center;
   border-radius: 10px;
}

li.active {
   border: 1px solid yellow;
   box-shadow: inset 0px 0px 7px 4px yellow;
}

li.active.top {
   text-shadow: 0 0 20px yellow;
   color: yellow;
   font-weight: bold;
   font-size: 3rem;
}
.run{
   color:red;
}

JS
new Vue({
el: '#app',
data() {
   return {
   items: ,
   active: 4,
   run: false,
   clicked: false
   }
},
methods: {
   fun1() {
   if (this.clicked) return
   this.clicked = true
   this.run = true
   var list =
   var i = Math.floor(Math.random() * (list.length - 1))
   var speed = 10
   var goround = setInterval(function(arg) {
      if (i >= (list.length - 1)) {
         i = 0
      } else {
         i++
      }
      arg.active = list

      speed += 5
      clearInterval(goround)
      if (speed < Math.round(Math.random() * 100 + 300)) {
         goround = setInterval(arguments.callee, speed, arg)
      } else {
         arg.clicked = false
         arg.run = false
         arg.$nextTick(() => {
         setTimeout(function() {
            alert(arg.items)
         }, 50)

         })
      }
   }, speed, this)
   }
}
})

页: [1]

吾爱破解 - 52pojie.cn's Archiver

求一个vue大转盘抽奖