【vue】vue实现跑马灯效果

使用两个方法：1、JavaScript substring() 方法定义和用法substring() 方法用于提取字符串中介于两个指定下标之间的字符。语法stringObject.substring(start,stop)参数描述start必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。stop...

ANKG

3516人浏览 · 2019-10-12 15:39:54

ANKG · 2019-10-12 15:39:54 发布

使用两个方法：

1、JavaScript substring() 方法

定义和用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法

stringObject.substring(start,stop)

参数	描述
start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

参数

描述

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^