Vue.js文字跑马灯实现代码

最新推荐文章于 2024-05-07 03:18:09 发布

nonodog

最新推荐文章于 2024-05-07 03:18:09 发布

阅读量439

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46170671/article/details/106578642

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js文字跑马灯实现代码

（本人前端初学者）

<body>
		<div id="app">
			<input type="button" value="走起" @click="zouqi"/>
			<input type="button" value="停" @click="stop"/>
			
			<h4 v-cloak>{{msg}}</h4>
		</div>
		
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg: '我爱你~~~~!',
					intervalId: null
				},
				methods:{
					zouqi(){
						//var _this=this  
						if(this.intervalId!=null) return;
						this.intervalId=setInterval(() => {
							var start = this.msg.substring(0, 1)
							var end = this.msg.substring(1)
							
							this.msg = end + start
							//每次将开头第一个字符截取追加到这段文字最后边，形成新的文字段
						},200)
						
					},
					stop(){
						clearInterval(this.intervalId)
						//每当清楚了定时器只后，重新将Id =null
						this.intervalId = null;
					}
				}
			})
			//substring方法， 字符串截取操作
			
		</script>
	</body>

如果想让页面上的跑马灯自动运行（不用按钮）可以试试下面代码（自己想到的嘻嘻，可能还有更好的办法，还没学到）。

<body>
<div id="app"  @mouseout="stop" @mouseover="zouqi">
//在body里面里套一个div ，@mouseover="zouqi"这样当鼠标光标在页面上的时候，跑马灯就启动。
     .......
     .......
     .......
     .......
     .......
	<h4 v-cloak>{{msg}}</h4>
	.......
	.......
	.......
	.......
	.......
	.......
	.......
	
</div>
<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg: '我爱你~~~~!',
					intervalId: null
				},
				methods:{
					zouqi(){
						//var _this=this  
						if(this.intervalId!=null) return;
						this.intervalId=setInterval(() => {
							var start = this.msg.substring(0, 1)
							var end = this.msg.substring(1)
							
							this.msg = end + start
							//每次将开头第一个字符截取追加到这段文字最后边，形成新的文字段
						},200)
						
					},
					stop(){
						clearInterval(this.intervalId)
						//每当清楚了定时器只后，重新将Id =null
						this.intervalId = null;
					}
				}
			})
			//substring方法， 字符串截取操作
			
		</script>
	</body>

nonodog

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js文字跑马灯实现代码

Vue.js跑马灯效果（本人前端初学者）<body> <div id="app"> <input type="button" value="走起" @click="zouqi"/> <input type="button" value="停" @click="stop"/> <h4 v-cloak>{{msg}}</h4> </div> <script> va
复制链接

扫一扫