跑马灯
用一矩形条显示用户特别关心的信息,这条信息串首尾相连,向一个方向循环滚动。
相关知识点
1、字符串分割方法:str.substring();
2、setinterval方法
原理
将字符串第一个字符分割连接到剩下字符串的末尾,用setinterval方法实现流动效果
简单的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="run" @click="lang">
<h1>{{msg}}</h1>
</div>
<script>
var run=new Vue({
el:'#app',
data:{
msg:"不要怂,一起上!"
},
methods:{
lang(){
setInterval(() => {
console.log(this.msg);
var start=this.msg.substring(0,1);
var end=this.msg.substring(1);
this.msg=end+start;
}, 400);
}
}
})
</script>
<style>
#app{
text-align:center;
}
</style>
</body>
</html>
效果
点击run使文字流动,实现跑马灯效果!