求一个vue大转盘抽奖

xy12

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

sundeheng

网页吗？uniapp的要不要

cube

HTML

[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 class="prize" style="font-size:5rem;color:red">中奖结果</div> -->
        </div>

CSS

[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

[JavaScript] 纯文本查看 复制代码

  new Vue({
    el: '#app',
    data() {
      return {
        items: [1,2,3,4,5,'陆',7,'捌',9],
        active: 4,
        run: false,
        clicked: false
      }
    },
    methods: {
      fun1() {
        if (this.clicked) return
        this.clicked = true
        this.run = true
        var list = [0,1,2,5,8,7,6,3]
        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[i]

          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[arg.active])
              }, 50)

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