Vue实现简单的跑马灯效果

最新推荐文章于 2024-04-01 14:53:17 发布

好运.

最新推荐文章于 2024-04-01 14:53:17 发布

阅读量1.2k

点赞数 3

文章标签： vue.js javascript css3

本文链接：https://blog.csdn.net/pink_cz/article/details/121053483

版权

Vue实现简单的跑马灯效果

效果：点击按钮让文字动起来，点击停止按钮让文字停止

知识点：

substring(字符串截取)
setInterval定时器(控制文字移动速度)
clearInterval清除定时器(控制文字停止)

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#app{
				width: 200px;
				height: 120px;
				background-color: pink;
				text-align: center;
				border-bottom: 1px solid #cfccc5;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>{{text}}</h1><br>
			<button @click="piao()">飘</button>&nbsp;&nbsp;&nbsp;
			<button @click="ding()">定住</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					text:"跑马灯效果！",
					flag:null
				},
				methods:{
					piao(){
						// 如果ind已经被赋值了就返回
						if(this.flag){return};
						this.flag = setInterval(()=>{
							// 截取首个字符
							var head = this.text.substring(0,1);
							// 截取除了首个字符外的所有字符
							var foot = this.text.substring(1);
							// 拼接起来
							this.text = foot + head;
						},100)
					},
					ding(){
						// 清除定时器
						clearInterval(this.flag);
						// 把flag置空 不然下一次点击文字不会移动
						this.flag=null;
					}
				}
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述

好运.

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue实现简单的跑马灯效果

Vue实现简单的跑马灯效果效果：点击按钮让文字动起来，点击停止按钮让文字停止知识点：substring(字符串截取)setInterval定时器(控制文字移动速度)clearInterval清除定时器(控制文字停止)代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js
复制链接

扫一扫