03.跑马灯效果.html

最新推荐文章于 2025-07-13 14:09:00 发布

原创最新推荐文章于 2025-07-13 14:09:00 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单动画效果，通过按钮触发定时器，使页面上的文本内容进行旋转变化，同时提供了停止动画的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Document</title>

    <script src="./lib/vue.min.js"></script>
</head>

<body>

    <!--创建一个VUE要控制的区域-->
    <div id="app">

        <input type="button" value="浪起来" @click='langqilai'>
        <input type="button" value="低调" @click='didiao'>

        <h4>{{msg}}</h4>
    </div>

    <script>
        //注意 如果想获取调用data或methods里面的属性或者方法 得通过this.属性名或者this.方法名
        //的方式才能获取调用
        var vm = new Vue({
            el: '#app',
            data: {
                msg : '稳住发育,别浪~~~!',
                intervalId : null //启动一个定时器 返回的id
            },
            methods: {
                langqilai() {

                    //如果不这样写 setInterval函数中会认为this指的是setInterval这个函数对象
                    // var _this = this;

                    // setInterval(function(){//放入定时器中
                    //     //截取第一个
                    //     var start = _this.msg.substring(0, 1);
                    //     //截取第一个文字后面的内容
                    //     var end = _this.msg.substring(1);

                    //     //重新拼接字符串 vue实例vm会自动监听data中变量的改变 只要数据一发生变化
                    //     //就会自动将最新的数据 同步到data中的变量中去
                    //     _this.msg = end + start;
                    // }, 400)

                    //但上面这种替代this的方式不推荐 改用另外一种() => 箭头函数的方式解决this问题

                    if (this.intervalId != null) {
                        //因为每点击一次浪 按钮 都会生成一个新的定时器 每次也随之返回一个新的intervalid
                        //这就导致了 点击 低调 按钮的时候 停止不下来定时器 所以用一个变量来控制
                        //只能生成一个定时器的方式 这样无论点击几下 浪按钮 都只能生成一个定时器了
                        //随之 当点击 低调按钮的时候 定时器也就停止了
                        return;
                    }
                    this.intervalId = setInterval (() => {//放入定时器中
                        //截取第一个
                        var start = this.msg.substring(0, 1);
                        //截取第一个文字后面的内容
                        var end = this.msg.substring(1);

                        //重新拼接字符串 vue实例vm会自动监听data中变量的改变 只要数据一发生变化
                        //就会自动将最新的数据 同步到data中的变量中去
                        this.msg = end + start;
                    }, 400)
                },
                didiao() {//停止定时器
                    clearInterval(this.intervalId);
                    //当点击 低调按钮后 停止 清除定时器标记 再点击浪按钮的时候 启动一个新的定时器
                    this.intervalId = null;
                }
            }

        })
    </script>

</body>

</html>