Vue - 跑马灯效果

最新推荐文章于 2024-01-16 11:35:51 发布

凡小多

最新推荐文章于 2024-01-16 11:35:51 发布

阅读量79

点赞数 1

分类专栏： vue 文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/wgh4318/article/details/120550815

版权

vue 专栏收录该内容

76 篇文章 3 订阅

订阅专栏

步骤：

给按钮，绑定一个点击事件 v-on 或 @
在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后调用字符串的 substring 来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可
为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去

**参考代码 **

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	</head>

	<body>
		<div id="app">
			<input type="button" value="开始" @click="lang">
			<input type="button" value="暂停" @click="stop">

			<h4>{{ msg }}</h4>

		</div>

		<script>
		/* eslint-disable */ //表示当前行之后，不做eslint检验
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '跑起来~~~!',
					intervalId: null // 在data上定义 定时器Id
				},
				methods: {
					lang() {
						// 获取到头的第一个字符
						if (this.intervalId != null) return;

						this.intervalId = setInterval(() => {
							var start = this.msg.substring(0, 1)
							// 获取到 后面的所有字符
							var end = this.msg.substring(1)
							// 重新拼接得到新的字符串，并赋值给 this.msg
							this.msg = end + start
						}, 200)
					},
					stop() { // 停止定时器
						clearInterval(this.intervalId)
						// 每当清除了定时器之后，需要重新把 intervalId 置为 null
						this.intervalId = null;
					}
				}
			})
		</script>
	</body>

</html>

演示图
在这里插入图片描述

凡小多

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue - 跑马灯效果

步骤：给按钮，绑定一个点击事件 v-on 或 @在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后调用字符串的 substring 来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去**参考代码 **<!DOCTYPE html><html lang="en"> <head> <meta charset="UT
复制链接

扫一扫