跑马灯

最新推荐文章于 2021-12-05 18:22:14 发布

想喝橙汁儿

最新推荐文章于 2021-12-05 18:22:14 发布

阅读量405

点赞数

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

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108274841

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

vue 跑马灯

思路：将字符串的第一个字符取出，再将剩下的所有字符取出，重新拼接字符串，将第一个字符放在最后，设置计时器。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h3>跑马灯效果</h3>
		<div id="app">
			<p>{{text}}</p>
			
			<button @click="start()">飘</button>
			<button @click="stop()">停止</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					text:'取次花丛懒回顾，半缘修道半缘君。',
					temp:null,
				},
				methods:{
					start(){
						if(this.temp===null){
							this.temp = setInterval(()=>{
								let t1 = this.text.substr(0,1);
								let t2 = this.text.substring(1);
								this.text= t2 + t1;
							},100)
						}
					},
					stop(){
						clearInterval(this.temp);
						this.temp=null;
					}
				}
			})
			
			
		</script>
	</body>
</html>

想喝橙汁儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跑马灯

vue 跑马灯效果：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h3>跑
复制链接

扫一扫