javascript - 使用vue做個抽獎問題
問題描述
代碼：
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title></title> <script src='https://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’}, // 這些都假設(shè)是一些用戶名字{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>
比如10秒就要停止顯示， 快到10秒了，就應(yīng)該慢慢的停止。 這樣用戶才會有那種激動感。
相信大家都玩過轉(zhuǎn)盤，就跟那個類似。 但是不知道怎么做。
問題解答
回答1：簡單的做了一個 demo。
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title></title> <script src='https://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’}, // 這些都假設(shè)是一些用戶名字{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>回答2：
那你的定時器可以分兩個5s執(zhí)行啊，前5s快，后5s慢。
相關(guān)文章：
1. javascript - 使用form進行頁面跳轉(zhuǎn)，但是很慢，如何加一個Loading？2. python 計算兩個時間相差的分鐘數(shù)，超過一天時計算不對3. angular.js - angularjs 注入模塊報錯 很怪異... 求解惑4. docker-machine添加一個已有的docker主機問題5. javascript - 后臺管理系統(tǒng)左側(cè)折疊導(dǎo)航欄數(shù)據(jù)較多，怎么樣直接通過搜索去定位到具體某一個菜單項位置，并展開當(dāng)前菜單6. docker-compose中volumes的問題7. javascript - JS 里面的 delete object.key 到底刪除了什么？8. javascript - ES6規(guī)范下 repeat 函數(shù)報錯 Invalid count value9. javascript - html5的data屬性怎么指定一個function函數(shù)呢？10. angular.js - 輸入郵箱地址之后， 如何使其自動在末尾添加分號？
網(wǎng)公網(wǎng)安備