使用Vue.js实现文字跑马灯效果

  • 使用Vue.js实现文字跑马灯效果已关闭评论
  • 163 次浏览
  • A+
所属分类:Web前端
摘要

实现文字跑马灯效果,首先用到 substring()截取 和 setInterval计时器 clearInterval()清除计时器

实现文字跑马灯效果,首先用到 substring()截取 和 setInterval计时器 clearInterval()清除计时器

效果如下:

使用Vue.js实现文字跑马灯效果

实现代码如下:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>跑马灯效果</title>     <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"         type="application/javascript"></script> </head>  <body>     <div id="app">         <button @click="lang">开始</button>         <button @click="stop">结束</button>          <h1> {{pao}} </h1>     </div>      <script>         let vm = new Vue({             el: "#app",             data() {                 return {                     pao: '这是一个会跑的文字~~~~~~',                     setInterval: null                 }             },             methods: {                 lang() {                     //阻止lang再次执行                     if (this.setInterval != null) return                     // 使用substring截取字符串                     this.setInterval = setInterval(() => {                         console.log(this.pao);                         //获取头一个 字符                         let qian = this.pao.substring(0, 1)                         //获取后面的所以字符                         let hou = this.pao.substring(1)                         //将获取到的字符拼接起来                         this.pao = hou + qian                     }, 300)                 },                 stop() {                     clearInterval(this.setInterval)                     //每次清除计时器是 将setInterval 重新赋值为 null                     this.setInterval = null                 }              }         })     </script> </body>  </html> 

以上是实现文字跑马灯效果,如有不足的地方,欢迎在评论区留言。