Vue实战项目1：跑马灯效果

最新推荐文章于 2025-07-13 14:09:00 发布

原创最新推荐文章于 2025-07-13 14:09:00 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过按钮控制，利用JavaScript的substring和定时器功能实现跑马灯效果，展示了完整的HTML和Vue脚本代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue实战项目1：跑马灯效果

一、效果预览

在这里插入图片描述

二、编写思路

两个按钮用于启动和停止，绑定点击事件，使用v-on，可以简写为@

<input type="button" value="跑起来" @click="run"/>
<input type="button" value="停下来" @click="stop"/>

在按钮的事件处理函数中，首先拿到msg字符串，然后调用字符串的substring来进行字符串截取操作，即，截取第一个字符，放到最末尾处。

var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start

使用定时器实现自动重复截取和拼接的功能。

setInterval(() => {
	var start = this.msg.substring(0, 1)
	var end = this.msg.substring(1)
	this.msg = end + start
},200)

为了确保定时器不会重复叠加开启，在data中定义intervalId，确保定时器状态

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '恐龙抗狼，抗狼抗~',
			intervalId: null
		},
		methods:{
			run(){
				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)
				this.intervalId = null
			}
		}
	})
</script>

三、整体代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跑马灯效果</title>
		<script src="lib/vue-2.4.0.js"></script>
	</head>
	<body>		
		<div id="app">
			<input type="button" value="跑起来" @click="run"/>
			<input type="button" value="停下来" @click="stop"/>
			<h4>{{ msg }}</h4>
		</div>
		
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '恐龙抗狼，抗狼抗~',
					intervalId: null
				},
				methods:{
					run(){
						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)
						this.intervalId = null
					}
				}
			})
		</script>
	</body>
</html>