跑马灯案例的制作

Posted 2020-12-10 lqmchn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跑马灯案例的制作相关的知识，希望对你有一定的参考价值。

通过以下案例的练习，可以掌握：

Vue中插值表达式的用法
如何使用v-on:或者@绑定事件
一些共有的数据最好放到data中去挂载

=> 箭头函数的特性：内部this永远指向外部this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id=‘app‘>
			<input type="button" value="开始" v-on:click="go" />
			<input type="button" value="结束" @click="stop" />
			
			<h3>{{msg}}</h3>
			
		</div>
		<script>
			const vm = new Vue({
				el: "#app",
				data:{
					msg: "我拿BUFF，谢谢！",
					intervalId: null //d定时器的ID，默认等于null
				},
				methods:{
					go: function(){ //开始跑马灯效果
					//思路：先截去第一个字符，然后吧这个字符放到结尾
					// this.msg.substring(起始的索引，结束的索引[不包含结束的索引])
						//每次开启定时器前先清除定时器，防止多次点击后只有最后一次点击的定时器ID被保存，
						//但是这也会偶问题，当点击速度足够快的时候，一直在清理，跑马灯根本不动
						// clearInterval(this.intervalId); 
						
						//如果定时器的ID不等于NULL就表示已经有定时器在执行了，此时直接退出这样就不会开启第二个定时器了
						if(this.intervalId !== null)return 
						
						this.intervalId = setInterval(()=>{
							const header = this.msg.substring(0,1);
							const body = this.msg.substring(1,);
							this.msg = body + header;	
						},300)
						
					},
					stop: function(){ //结束跑马灯效果
						clearInterval(this.intervalId);
						//每当清除定时器之后，为了保证下次能偶正常开启定时器，所以需要把intervalId重置为null
						this.intervalId = null; 
					}
				}
			})
		</script>
	</body>
</html>

以上是关于跑马灯案例的制作的主要内容，如果未能解决你的问题，请参考以下文章