分别用Js和vue实现跑马灯效果

淩亂°似流年 2023-10-06 12:21 5阅读 0赞

#### 文章目录 ####

*   *   *  一、使用js实现
         *  二、使用vue实现

<table> 
 <tbody> 
  <tr> 
   <td>跑马灯就是这条信息串首尾相连，向一个方向循环滚动。。。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 一、使用js实现 ####

*`实现逻辑`*：

> ① 根据id值获取标签
> 
> ② 获取标签的文本内容
> 
> ③ 截取文本内容的第一个字
> 
> ④ 截取文本内容第一个字后面的所有内容
> 
> ⑤ 把第③步截取的第一个字拼接到第④步截取的文本内容后面
> 
> ⑥ 将第⑤步拼接后的字符串写入到第①步的标签中

*`代码实现`*：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>纯js实现跑马灯效果</title>
        <style>
            .btn-start {
        
                text-align: center;
                color: white;
                background-color: green;
                font-size: 15px;
                margin-top: 10px;
            }
    
            .btn-stop {
        
                text-align: center;
                color: white;
                background-color: red;
                font-size: 15px
            }
    
            .btn-wrap {
        
                margin: 10px auto;
                width: 32%;
            }
    
            #str {
        
                background-color: rgb(116, 114, 231);
                color: white;
                font-size: 35px;
                width: 32%;
                margin: auto;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    
    <body>
        <div id="str">欢迎访问TwcatL的博客!!!</div>
    
        <div class="btn-wrap">
            <button class="btn-start">
                <span οnclick="start()">动起来</span>
            </button>
    
            <button class="btn-stop">
                <span οnclick="stop()">停下来</span>
            </button>
        </div>
    
        <script type="text/javascript">
            var intervalId = null;
            var timerId = null;
            $(function () {
        
                initTimer();
            })
    
            function start() {
        
            	// 判断定时器id是否为空
                if (intervalId != null) {
        
                    return
                }
                intervalId = setInterval(function () {
        
                    var label = document.getElementById('str'); 
                    var text = label.innerText;
                    var begin = text.substring(0, 1);
                    var end = text.substring(1);
                    var text_new = end + begin;
                    label.innerText = text_new;
                }, 200);
            }
    
            function stop() {
        
            	// 清除定时器
                clearInterval(intervalId);
                // 把定时器id置为空
                intervalId = null;
            }
    
            function initTimer() {
        
            	// 设置在指定2秒后执行
                timerId = setTimeout(function () {
        
                    start();
                }, 2000);
            }
        </script>
    
    </body>
    
    </html>

***注意：***

① `setTimeout`() 方法用于在指定的毫秒数后调用函数或计算表达式。`setTimeout`()方法接收两个参数，第一个参数是将要推迟执行的函数名或者一段代码，第二个参数是推迟执行的毫秒数。

在上面的跑马灯效果中，当打开页面的时候，等待两秒钟，它会自动调用start方法，实现动起来的效果。

② `setInterval`() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

`setInterval`() 方法会不停地调用函数，直到 `clearInterval`() 被调用或窗口被关闭。由 `setInterval`() 返回的 ID 值可用作 `clearInterval`() 方法的参数。

#### 二、使用vue实现 ####

*`代码实现`*：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="js/vue.js"></script>
        <script src="js/jquery.js"></script>
        <style>
            .btn-start {
        
                text-align: center;
                color:white;
                background-color: green;
                font-size: 15px;
                margin-top: 10px;
            }
            .btn-stop {
        
                text-align: center;
                color: white;
                background-color: red;
                font-size: 15px
            }
            .btn-wrap {
        
                margin: 10px auto;
                width: 32%;
            }
            .str{
        
                background-color: rgb(116, 114, 231);
                color: white;
                font-size: 35px;
                width: 32%;
                margin: auto;
            }
        </style>    
            
    </head>
    
    <body>
        <div id="app">
            <div class="str">{
        {
        msg}}</div>
            <div class="btn-wrap">
                <input type="button" class="btn-start" value="动起来" @click="start" />
                <input type="button" class="btn-stop" value="停下来" @click="stop" />
            </div>
        </div>
    
        <script>
            var vm = new Vue({
        
                el: "#app",
                data: {
        
                    msg: "欢迎访问扬帆向海的博客!!!",
                    intervalId: null, 
                    timerId: null
                },
                mounted() {
        
                    this.initTimer()
                },
                methods: {
        
                    start() {
        
                        if (this.intervalId != null) {
        
                            return;
                        }
                        this.intervalId = setInterval(() => {
        
                            var begin = this.msg.substring(0, 1)
                            var end = this.msg.substring(1)
                            this.msg = end + begin
                        }, 200);
                    },
                    stop() {
        
                        clearInterval(this.intervalId)
                        this.intervalId = null
                    },
                    initTimer() {
        
                        this.timerId = setTimeout(() => {
        
                            this.start()
                        },2000)
                    }
                },
                destoryed() {
        
                    this.timerId = null
                }
            });
        </script>
    </body>
    
    </html>

***注意***：

① 在vue中，如果想要获取data上的数据，或者想要调用 methods 中的方法，必须通过`this.属性名` 或 `this.方法名` 来进行调用，其中 `this` 就是当前的实例对象。

② 在vue中，会监听data中所有数据的改变，只要数据一发生改变，就会自动把最新的数据同步到页面中去。这样可以减少程序员的工程量，不再考虑如何重新渲染dom页面，只需要关心数据即可。