当前位置 > it书童 > vue > 正文

vue使用定时器实现跑马灯滚动效果

vue it书童 2019-10-04 20:28:49 0赞 0踩 696阅读 0评论

<!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">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>跑马灯效果</title>
</head>
<body>
    <div id="app">
        <div class="container mt-5">
            <button class="btn btn-success" @click="run">跑起来</button>
            <button class="btn btn-primary" @click="stop">停止</button>
            <h3 class="text-center">{{ msg }}</h3>
        </div>
    </div>
    <script>
        // 在 VM实例中,如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名  或  this.方法名 来进行访问,这里的this,就表示 我们 new 出来的  VM 实例对象
        let vm = new Vue({
            el: '#app',
            data: { 
                msg: '无边落木萧萧下,不尽长江滚滚来',
                intervalId: null // 定义定时器
            },
            methods: {
                run() {
                    if (this.intervalId != null) return;
                    this.intervalId = setInterval(() => { // 设置定时器
                        let start = this.msg.substring(0, 1) // 获取第一个字符
                        let end = this.msg.substring(1) // 获取除第一个之外的字符
                        this.msg = end + start // 拼接新字符
                    }, 400)
                },
                stop() { // 清除定时器
                    clearInterval(this.intervalId)
                    this.intervalId = null
                }
            }
        })
    </script>
</body>
</html>
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/233/vue-uses-timer-to-realize-the-rolling-effect-of-running-lamp