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’}, // 这些都假设是一些用户名字{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秒了，就应该慢慢的停止。 这样用户才会有那种激动感。
相信大家都玩过转盘，就跟那个类似。 但是不知道怎么做。
问题解答
回答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’}, // 这些都假设是一些用户名字{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执行啊，前5s快，后5s慢。
相关文章：
1. android - NavigationView 的侧滑菜单中如何保存新增项（通过程序添加）2. 老师 我是一个没有学过php语言的准毕业生 我希望您能帮我一下3. 编程学习心得分享（共80条）4. 关于thinkphp 5.1中，ajax提交数据url的格式写法，加花括号就出错，请老师指点5. php7.3.4中怎么开启pdo驱动6. tp5 不同控制器中的变量调用问题7. 提示语法错误语法错误: unexpected ’abstract’ (T_ABSTRACT)8. 这段代码既不提示错误也看不到结果，请老师明示错在哪里，谢谢！9. ueditor上传服务器提示后端配置项没有正常加载，求助！！！！！10. php - 一个操作请求多个服务如何保证数据的安全？
网公网安备