javascript - Utilisez Vue pour poser une question de loterie

Code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app ul li {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background: #ccc;
            float: left;
        }

        #app ul li.active {
            border: 3px solid red;
        }
    </style>
</head>
<body>
<p id="app">
    <ul>
        <li v-for="(item, index) of items" :class="{active: index == actvieIndex}">{{ item.name }}</li>
    </ul>
</p>
<script>
var app = new Vue({
    el: '#app',
    data () {
        return {
            actvieIndex: 0,
            items: [
                {name: '1'},
                {name: '2'},
                {name: '3'},
                {name: '4'},
                {name: '5'},  // 这些都假设是一些用户名字
                {name: '6'},
                {name: '7'},
                {name: '8'},
                {name: '9'},
                {name: '10'},
                {name: '11'},
                {name: '12'},
                {name: '13'},
                {name: '14'},
                {name: '15'},
                {name: '16'},
                {name: '17'},
            ]
        }
    },
    mounted () {
        setInterval(() => {
            this.actvieIndex++;
            if(this.actvieIndex >= this.items.length ) this.actvieIndex = 0;
        }, 50);
    }
})
</script>
</body>
</html>

Par exemple, l'affichage doit s'arrêter après 10 secondes. Lorsqu'il est presque 10 secondes, il doit s'arrêter lentement. Ce n’est qu’ainsi que les utilisateurs pourront se sentir enthousiasmés.

Je crois que tout le monde a joué à la platine, c'est pareil. Mais je ne sais pas comment faire.

ringa_lee2767 Il y a quelques jours861

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/vue/2.3.4/vue.min.js"></script> <style> * { margin: 0; padding: 0; } #app ul li { width: 100px; height: 100px; box-sizing: border-box; background: #ccc; float: left; } #app ul li.active { border: 3px solid red; } </style> </head> <body> <p id="app"> <ul> <li v-for="(item, index) of items" :class="{active: index == actvieIndex}">{{ item.name }}</li> </ul> </p> <script> var app = new Vue({ el: '#app', data () { return { actvieIndex: 0, i: 0, count: 0, items: [ {name: '1'}, {name: '2'}, {name: '3'}, {name: '4'}, {name: '5'}, // 这些都假设是一些用户名字 {name: '6'}, {name: '7'}, {name: '8'}, {name: '9'}, {name: '10'}, {name: '11'}, {name: '12'}, {name: '13'}, {name: '14'}, {name: '15'}, {name: '16'}, {name: '17'}, ] } }, methods: { go(seconds) { const SECONDS = seconds * 1000; const HALF_SECONDS = SECONDS / 2; const FREQUENCY = 50; setTimeout(() => { console.log(this.count) this.actvieIndex++; if(this.actvieIndex >= this.items.length ) this.actvieIndex = 0; if (this.count >= HALF_SECONDS) { this.i+= 10; this.count += 50 + this.i; } else { this.count += 50; } if (this.count <= SECONDS) { this.go(seconds) } }, FREQUENCY + this.i); } }, mounted () { this.go(5) } }) </script> </body> </html>

javascript - Utilisez Vue pour poser une question de loterie

répondre à tous(2)je répondrai