点击实现跑马灯效果Vue

最新推荐文章于 2024-05-13 21:44:04 发布

MMMMMMF

最新推荐文章于 2024-05-13 21:44:04 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/MMMMMMF/article/details/107771038

版权

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app>p {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div id="app">
    <button @click="start()">浪起来</button>
    <button @click="end()">别浪</button>
    <p>{{txt}}</p>
  </div>
  <script src="./js//vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        txt: "猥琐发育~~别浪！！",
        timer: null,
        // flag:true
      },
      methods: {
        start() {
          // if (this.flag) {
            if(this.timer != null) return;
            this.timer = setInterval(() => {
              let s = this.txt.substring(0, 1)
              let e = this.txt.substring(1)
              this.txt = e + s;
            }, 500)
            this.flag = false
          // }
        },
        end() {
          clearInterval(this.timer);
          // this.flag = true
          this.timer = null;
        }
      }
    })
  </script>
</body>

</html>

MMMMMMF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击实现跑马灯效果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> <style> #app>p { font-size:
复制链接

扫一扫