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

写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的

这博客是对自己学习的一点点总结及记录,如果您对 Java算法 感兴趣,可以关注我的动态,我们一起学习。

用知识改变命运,让我们的家人过上更好的生活

跑马灯就是这条信息串首尾相连,向一个方向循环滚动。。。

在这里插入图片描述


一、使用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">欢迎访问扬帆向海的博客!!!</div>

    <div class="btn-wrap">
        <button class="btn-start">
            <span onclick="start()">动起来</span>
        </button>

        <button class="btn-stop">
            <span onclick="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页面,只需要关心数据即可。


由于水平有限,本博客难免有不足,恳请各位大佬不吝赐教!

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页