当前位置:首页 » 《随便一记》 » 正文

vue实现跑马灯效果_lwf0829的博客

24 人参与  2022年04月28日 17:53  分类 : 《随便一记》  评论

点击全文阅读


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<!-- 点击事件调用move函数 -->
			<button type="button" @click="move()">动</button>
			<!-- 点击事件调用stop函数 -->
			<button type="button" @click="stop()">停</button>
		</div>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				msg:"喜羊羊,美羊羊,懒羊羊,沸羊羊,暖羊羊,",
				ind:null
			},
				
			methods:{
				move(){
					if(this.ind){return};
					// 切割第一个字,将其添加到尾部实现动起来的效果
					this.ind=setInterval(()=>{
						var arr=this.msg.split('');
						arr.push(arr.shift());
						this.msg=arr.join('')
					},100)
				},
				stop(){
					// 清除计时器
					clearInterval(this.ind);
					this.ind=null
				}
			}
		})
	</script>
</html>

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/39128.html

调用  函数  事件  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1