communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Utilisez Vue pour poser une question de loterie
ringa_lee
ringa_lee 2017-06-30 09:55:08
0
2
844

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_lee
ringa_lee

ringa_lee

répondre à tous(2)
淡淡烟草味
淡淡烟草味2017-06-30 09:57:08 2 plancher

J'ai simplement fait une démo. 

<!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>
Comme +0
Ajouter une réponse
巴扎黑
巴扎黑2017-06-30 09:57:08 1 plancher

Ensuite, votre minuterie peut être exécutée en deux 5s, les premières 5s sont rapides et les dernières 5s sont lentes.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal