【前端框架学习】第一次实验跑马灯效果的制作

2023-12-06 16:23:34

一.什么是跑马灯效果

每隔一段时间，排在首位的字符会被后一个字符所代替，而首位字符会被移到队尾。

二.实验过程

1.首先创建控制区域与vue实例：

    <div id="app">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello,world!'
            }
        });
    </script>

2.然后再app控制区域添加message渲染内容：

<h4>{{message}}</h4>

3.在h4的上方创建跑马灯启停按钮：

<input type="button" value='开始跑马灯' @click='start()'>
<input type="button" value='停止跑马灯' @click='stop()'>

4.对开始跑马灯按钮添加点击事件，同时在事件处理函数中添加相关的业务逻辑代码：

①使用substring对字符串进行截取操作，把第一个字符截取出来拼接到字符串末尾。

start(){
    //获取字符串头的字符
    var first = this.message.substring(0,1);
    //获取后面的所有字符
    var end = this.message.substring(1);
    //重新拼接得到新的字符串并赋值给this.message
    this.message = end+first;
}

②为了实现点击一下按钮自动截取的功能需要将①中的代码放到定时器中。在添加定时器功能时需要注意data数据this指向的问题。解决方法1：可以在定时器外部写一个变量保存一份this；解决方法2：将setInerval中的函数写成箭头函数，将内部的this改造成外部this。

methods: {
    start() {
        this.intervalId = setInterval( () => {
            //获取字符串头的字符
            var first = this.message.substring(0, 1);
            //获取后面的所有字符
            var end = this.message.substring(1);
            //重新拼接得到新的字符串并赋值给this.message
            this.message = end + first;
          },400) 
     }
}

注1：在methods中的函数如果想要拿到data上的数据，需要通过 this.数据属性名来获取，或者使用 this.方法名来进行访问；这里this代表的就是当前new出的实例。

注2：实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去。【这样做的好处在于程序员只需要关心数据而不需要关心如何重新渲染DOM页面。】

5.对停止跑马灯按钮添加点击事件，同时在事件处理函数中添加相关的业务逻辑代码：

①在data上定义定时器Id。

intervalId:null;

②在methods中添加停止定时器函数

stop() {
    clearInterval(this.intervalId);
}

6.对开始按钮的点击次数进行限制

方法：在start函数中添加判断语句，判断intervalId是否为空，如果为空则执行定时器，点击停止按钮后将intervalI的值重新置为空。

//start函数添加判断语句
if(this.intervalId != null) return;

//stop函数需添加的语句
this.intervalId = null;

三、完整代码

<body>
    <div id="app">
        <input type="button" value='开始跑马灯' @click='start()'>
        <input type="button" value='停止跑马灯' @click='stop()'>
        <h4>{{message}}</h4>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello,world!',
                intervalId: null
            },
            methods: {
                start() {
                    if(this.intervalId != null) return;

                    this.intervalId = setInterval(() => {
                        //获取字符串头的字符
                        var first = this.message.substring(0, 1);
                        //获取后面的所有字符
                        var end = this.message.substring(1);
                        //重新拼接得到新的字符串并赋值给this.message
                        this.message = end + first;
                    }, 400)
                },
                stop() {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                }
            }
        });
    </script>
</body>

码农公寓