【前端学习日记】利用Vue实现跑马灯的效果

最新推荐文章于 2024-08-22 02:07:07 发布

置顶王贝贝的爸爸

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量721

点赞数

分类专栏：前端学了个寂寞文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_48276030/article/details/120154359

版权

前端学了个寂寞专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、效果

按下roll按钮，文字进行滚动；
按下stop按钮，文字停止滚动；

在这里插入图片描述

二、重要代码

1.通过以下方式引入Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.实现文字的更替

var start = this.text.substring(0, 1)//获取字符串的第一个元素
var end = this.text.substring(1)//获取字符串剩下的元素
this.text = end + start

3.设置定时器

setInterval(() => {
    var start = this.text.substring(0, 1)
    var end = this.text.substring(1)
    this.text = end + start
}, 400)

4.清除定时器

stop() {//按下按钮后文字清除定时器，文字滚动停止
    clearInterval(this.intervalID)
    this.intervalID = null
}

三、完整代码

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="跑马灯.css">
</head>

<body>

    <div id="else" class="main">
        <p class="main-content">{{text}}</p>
        <span><input type="button" value="ROLL" @click="lang" class="btn"></span>
        <span><input type="button" value="STOP" @click="stop" class="btn"></span>
    </div>

    <script>
        var vm = new Vue({
            el: '#else',
            data: {
                text: "今日本店开业，全场商品五折，欢迎进店品尝！",
                intervalID: null
            },
            methods: {
                lang() {
                    if (this.intervalID != null) return;
                    this.intervalID = setInterval(() => {
                        var start = this.text.substring(0, 1)
                        var end = this.text.substring(1)
                        this.text = end + start
                    }, 400)
                },
                stop() {
                    clearInterval(this.intervalID)
                    this.intervalID = null
                }
            }
        })
    </script>

</body>

</html>