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>

效果