vue实现跑马灯效果
2019-09-26 16:06
2041 查看
vue实现跑马灯效果为阿中哥哥应援
1、效果图
2、实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <!-- 引入vue.js--> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <button @click="show">应援</button> <button @click="stop">暂停</button> <h3 v-text="message"></h3> </div> <script> var vm = new Vue({ el:"#app", data:{ message:"阿中阿中勇敢飞,中华儿女永相随~~~", timer:null //在data上定义定时器timer,默认为null }, methods:{ show(){ if(this.timer != null) return; this.timer = setInterval(() => { //获取到头的第一个字符 let start = this.message.substring(0,1); //获取到后面的所有字符 let end = this.message.substring(1); //重新拼接得到新的字符串,并赋值给this.message this.message = end + start; },300) }, stop(){ //清除定时器 clearInterval(this.timer) //清除定时器之后,需要重新将定时器置为null this.timer = null } } }) </script> </body> </html>
相关文章推荐
- vue学习二——实现跑马灯效果
- vue学习笔记:1.vue实现简单的跑马灯效果
- Vue简短代码实现文字首尾无缝跑马灯效果
- Vue 使用计时器实现跑马灯效果的实例代码
- WinForm中实现跑马灯的效果
- Vue.js实现tab切换效果
- 原 vue实现滑动切换效果
- TextView实现跑马灯效果
- 一、Android 实现两个TextView跑马灯效果
- ViewGroup可实现上下、各地跑马灯效果滚动
- 基于vue实现移动端圆形旋钮插件效果
- vue实现app页面切换效果
- vue + elementui实现dialog自适应窗口的效果
- vue中用动态组件实现选项卡切换效果
- 实现Notification上的跑马灯效果
- Android 跑马灯效果的实现
- 遮罩clippingNode实现标题闪亮特效、类似机关枪瞄准效果、跑马灯效果
- Android跑马灯效果实现
- 用js实现跑马灯效果
- android:ellipsize实现跑马灯效果总结