vue.js小练习之跑马灯

最新推荐文章于 2024-03-23 10:55:32 发布

xyhanzhuangzhuang

最新推荐文章于 2024-03-23 10:55:32 发布

阅读量147

点赞数

分类专栏：小白的vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/xyhanzhuangzhuang/article/details/105245931

版权

小白的vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

跑马灯主要步骤：
1、利用substring（0,1）截取第一个字符
2、利用substring（1）截取剩余字符
3、拼接步骤2+步骤1的字符
4、设置定时器setInterval，重复步骤1、2、3即可
5、注意定时器的清除

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue.js小练习之跑马灯</title>
    <script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <button @click='fn1'>start</button>
        <button @click='fn2'>stop</button>
        <div>{{mess}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                mess: "1234567890",
                time1: null
            },
            methods: {
                fn1: function () {
                    if (this.time1 != null) return;
                    this.time1 = setInterval(() => {
                        var start = this.mess.substring(0, 1);
                        var end = this.mess.substring(1);
                        this.mess = end + start;
                    }, 400);
                },
                fn2: function () {
                    clearInterval(this.time1);
                    this.time1 = null;
                }
            }
        });
    </script>
</body>

</html>