VUE绑定事件案例—文字跑马灯效果

2023年2月17日10:29:57

VUE绑定事件案例—文字跑马灯效果
要实现的效果：点击【浪起来】的时候，文字逐渐向左移动一个单位（循环）；
点击【猥琐发育】，文字停止移动。
VUE绑定事件案例—文字跑马灯效果
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字跑马灯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="猥琐发育" @click="stop">
        <h4> {{mess}} </h4>
    </div>


</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            mess: "猥琐发育，别浪！！！",
            timer:""
        },
        methods: {
            lang() {

                if(this.timer!="")  return;  //每次被点击了，就清除定时器，避免多次点击，越跑越快
                this.timer = setInterval(() => {
                    const start = this.mess.substring(0, 1)//获取到第一个字符
                    const end = this.mess.substring(1)//获取到第一个后面的字符
                    this.mess = end + start//重新组成新的数据
                }, 300)
            },
            stop() {
              clearInterval(this.timer);
              this.timer=""  //每次清除了定时器，就让定时器重新赋值为空
            }
        }
    })
</script>

</html>

  • 作者：weixin_49596018
  • 原文链接：https://blog.csdn.net/weixin_49596018/article/details/113353917
    更新时间：2023年2月17日10:29:57 ，共 804 字。