基于Vue.js实现跑马灯效果

版权声明:版权归wsc所有 https://blog.csdn.net/qq_37543808/article/details/85469576
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
   	<script type="text/javascript" src="js/vue.js"></script>
   	<script type="text/javascript" src="js/jquery-1.12.4.js"></script> 
</head>
<body>
	<div id="app">
		<div>
			<button type="button" @click="start()">跑起来</button>
			<button type="button" @click="end()">低调</button>
		</div>
		<div>{{msg}}</div>
	</div>
	 <script type="text/javascript">
	 		
	 		var vue=new Vue({
	 			el:"#app",
	 			data:{
	 				msg:"发育,猥琐发育,别浪!!!",
	 				time:"22"
	 			},
	 			methods:{
	 				start:function(){
	 					this.time=setInterval(()=>{
	 						var head=this.msg.substring(0,1);
	 						var tail=this.msg.substring(1);
	 						this.msg=tail+head;
	 					},400);

	 				},
	 				end:function(){
	 					clearInterval(this.time)

	 				}
	 			}
	 		})
	 
	 </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_37543808/article/details/85469576