vue跑马灯效果
程序员文章站
2022-03-03 09:33:53
...
使用两个方法：
1、JavaScript substring() 方法
定义和用法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法
stringObject.substring(start,stop)| 参数 | 描述 |
|---|---|
| start | 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 |
| stop |
可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。 |
返回值
一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。
在本例中，我们将使用 substring() 从字符串中提取一些字符：
<script type="text/javascript">
var str="Hello world!"
document.write(str.substring(3))
</script>
输出：
lo world!2、Window setInterval() 方法 //Interval间隔
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想执行一次可以使用 setTimeout() 方法。
显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行:
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
3 秒（3000 毫秒）后弹出 "Hello" :
setTimeout(function(){ alert("Hello"); }, 3000);3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue测试</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="button" value="浪起来" @click='lang'>
<input type="button" value="低调" @click='stop'>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'这是一个跑马灯效果！~~',
intervalID :null
},
methods:{
lang(){
console.log(this.intervalID)
if(this.intervalID !=null)return
// 箭头函数作用是解决函数内外this不一致问题，让this都为vue实例
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>
</body>
</html>