使用Vue.js实现文字跑马灯效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用Vue.js实现文字跑马灯效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现文字跑马灯效果，首先用到 substring()截取和 setInterval计时器 clearInterval()清除计时器

效果如下：

使用Vue.js实现文字跑马灯效果

实现代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯效果</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"
        type="application/javascript"></script>
</head>

<body>
    <div id="app">
        <button @click="lang">开始</button>
        <button @click="stop">结束</button>

        <h1> {{pao}} </h1>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    pao: '这是一个会跑的文字~~~~~~',
                    setInterval: null
                }
            },
            methods: {
                lang() {
                    //阻止lang再次执行
                    if (this.setInterval != null) return
                    // 使用substring截取字符串
                    this.setInterval = setInterval(() => {
                        console.log(this.pao);
                        //获取头一个 字符
                        let qian = this.pao.substring(0, 1)
                        //获取后面的所以字符
                        let hou = this.pao.substring(1)
                        //将获取到的字符拼接起来
                        this.pao = hou + qian
                    }, 300)
                },
                stop() {
                    clearInterval(this.setInterval)
                    //每次清除计时器是 将setInterval 重新赋值为 null
                    this.setInterval = null
                }

            }
        })
    </script>
</body>

</html>

以上是实现文字跑马灯效果，如有不足的地方，欢迎在评论区留言。文章来源地址https://www.toymoban.com/news/detail-418432.html

到了这里，关于使用Vue.js实现文字跑马灯效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！