Vue 使用計時器實現跑馬燈效果的實例代碼

2019-11-19 11:11:54

字體：大中小

來源：轉載

供稿：網友

Vue 使用計時器實現跑馬燈效果，代碼如下所示：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <script src="../Vue/vue.js"></script>  <link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="stylesheet">  <title>跑馬燈</title>  <style type="text/css">    #app button {      outline: none;    }  </style></head><body>  <div id="app" style="margin: 20px">    <button class="btn btn-info" @click='lang'>飛的速度</button>    <button class="btn btn-info" @click='stop'>猥瑣發育</button>    <div>      <h4 style="color: red">{{msg}}</h4>      <img src="buxiang.jpeg" alt="">    </div>  </div>  <script>    var ve = new Vue({      el: '#app',      data: {        msg: '只有飛速的旋轉，才可以止住為的淚水，忘記你的模樣。。。',        intervalId: null,      },      methods: {        // 動起來        lang() {          if (this.intervalId != null) return;          this.intervalId = setInterval(() => {            // 獲取第一個字符            var start = this.msg.substring(0, 1)            // 獲取第一個字符后面的所有字符            var end = this.msg.substring(1)            this.msg = end + start          }, 300)        },        // 停止運動        stop() {          clearInterval(this.intervalId)          // 重新賦值null          this.intervalId = null        }      }    })  </script>  <script src="lib/jquery/jquery-3.4.1.js"></script>  <script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script></body></html>

效果