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

2022-01-13 18:33:52 阅读：134 来源： 互联网

标签：字符框架前端 intervalId substring 跑马灯 var message data

一.什么是跑马灯效果

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

二.实验过程

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>

标签：字符,框架,前端,intervalId,substring,跑马灯,var,message,data
来源： https://blog.csdn.net/qq_38594872/article/details/122478814

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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