vue 跑马灯效果
转载<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<button @click="lang">浪起来</button>
<button @click="stop">别浪</button>
</div>
</body>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'猥琐发育,别浪~~~~',
intervalId:null
},
methods:{
lang() {
if(this.intervalId!=null) return;
this.intervalId=setInterval( () =>{
var start = this.msg.substring(0,1);
var end= this.msg.substring(1);
this.msg=end+start;
},400)
},stop(){
clearInterval(this.intervalId)
this.intervalId=null;
}
}})
</script>
</html>
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:gcc和g++编译器
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
js文字跑马灯
实现文字跑马灯效果,主要控制scrollLeft. 效果图如下 代码如下
js html jquery ajax mysql -
vue js文字跑马灯基础版本
1.html原生方法<marquee>123123</marquee>2.定时器方法let paymentPromptText = document.getEleme
javascript vue.js 前端 css html