Kod: {Kod...} Contohnya, paparan hendaklah berhenti selepas 10 saat Apabila hampir 10 saat, ia sepatutnya berhenti perlahan-lahan. Hanya dengan cara ini pengguna boleh berasa teruja. Saya percaya semua orang pernah bermain rolet, begitu sahaja. Tapi tak tahu nak buat macam mana.

Kemudian pemasa anda boleh dilaksanakan dalam dua 5s, 5s pertama adalah pantas dan 5s terakhir adalah perlahan.

javascript - Gunakan vue untuk membuat soalan loteri

Kod:

<!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>

Sebagai contoh, paparan harus berhenti selepas 10 saat Apabila hampir 10 saat, ia sepatutnya berhenti perlahan-lahan. Dengan cara ini pengguna akan mempunyai rasa teruja itu.

Saya percaya semua orang pernah bermain meja putar, ia sama seperti itu. Tapi tak tahu nak buat macam mana.

ringa_lee2692 hari yang lalu818

<!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 - Gunakan vue untuk membuat soalan loteri

membalas semua(2)saya akan balas