javascript – Verwenden Sie Vue, um eine Lotteriefrage zu stellen

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>

Zum Beispiel sollte die Anzeige nach 10 Sekunden stoppen. Wenn es fast 10 Sekunden sind, sollte sie langsam stoppen. Auf diese Weise werden die Benutzer dieses Gefühl der Aufregung verspüren.

Ich glaube, jeder hat den Plattenspieler gespielt, es ist ähnlich. Ich weiß aber nicht, wie ich das machen soll.

ringa_lee2693 Tage vor823

<!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 – Verwenden Sie Vue, um eine Lotteriefrage zu stellen

Antworte allen(2)Ich werde antworten