当前位置：网站首页>走马灯案例

走马灯案例

2022-07-27 18:12:00 【宇智波-林中路】

字符串截取(跑马灯)

this.msg.substring(起始的索引，结束的索引【不包含结束的索引】)
this.msg.substring(起始的索引) 不传截取到最后

 <body>
    <div id="app">
      <button @click="lang">浪起来</button>
      <button @click="stop">stop</button>
      <h2>{
   {msg}}</h2>
    </div>
  </body>
 <script>
    const app = new Vue({
      el: "#app",
      data: {
        msg: "花有从开日，人无再少年~",
        intervalId: null, //定时器id
      },
      methods: {
        lang() {
          // 如果 定时器的Id,不等于Null,就表示已经有定时器在执行了,此时,直接退出,这样就不会再开启第二个定时器了
          // if (this.intervalId != null) return;
          this.intervalId = setInterval(() => {
            const header = this.msg.substring(0, 1);
            const body = this.msg.substring(1);
            this.msg = body + header;
          }, 300);
        },
        stop() {
          clearInterval(this.intervalId);
          // 每当清除定时器之后,为了保证下次能够正常开启定时器,所以,需要把 intervalId 重置为null
          this.intervalId = null;
        },
      },
    });
    // setInterval  都有个返回值(id)
    //  data中可以存放一些共享的数据，这样当示例中的任何地方，都可以直接使用 this.属性名来访问这些共享
  </script>

原网站

版权声明
本文为[宇智波-林中路]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_60830137/article/details/125801045

边栏推荐

猜你喜欢

随机推荐