当前位置：网站首页>Riding lantern case

Riding lantern case

2022-07-27 20:56:00 【Yuzhibo Linzhong Road】

String interception ( Running lights )

this.msg.substring( Starting index , End index 【 Does not contain the ending index 】)
this.msg.substring( Starting index ) Don't pass interception to the end 

 <body>
    <div id="app">
      <button @click="lang"> Wave up </button>
      <button @click="stop">stop</button>
      <h2>{
   {msg}}</h2>
    </div>
  </body>
 <script>
    const app = new Vue({
      el: "#app",
      data: {
        msg: " Flowers bloom from the sun , No man is ever young ~",
        intervalId: null, // Timer id
      },
      methods: {
        lang() {
          //  If   Timer Id, It's not equal to Null, It means that there is already a timer executing , here , immediate withdrawal , So you won't start the second timer 
          // 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);
          //  Whenever the timer is cleared , To ensure that the timer can be started normally next time , therefore , Need to put  intervalId  Reset to null
          this.intervalId = null;
        },
      },
    });
    // setInterval   All have a return value (id)
    //  data Some shared data can be stored in , So when anywhere in the example , Both can be used directly  this. Property name to access these shares 
  </script>

原网站

版权声明
本文为[Yuzhibo Linzhong Road]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271811594231.html

边栏推荐

猜你喜欢

随机推荐