编程 Javascript

Vue 使用计时器实现跑马灯效果的实例代码

Posted in Javascript onJuly 11, 2019

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>

效果

总结

以上所述是小编给大家介绍的Vue 使用计时器实现跑马灯效果的实例代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vue 使用计时器实现跑马灯效果的实例代码

- Author -

Tynam.Yang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用dom+xhtml+css制作的一个相册效果代码打包下载

Jan 24 Javascript

标题过长使用javascript按字节截取字符串

Apr 24 Javascript

jQuery中extend函数的实现原理详解

Feb 03 Javascript

JavaScript获取网页表单提交方式的方法

Apr 02 Javascript

jQuery实现ajax调用WCF服务的方法(附带demo下载)

Dec 04 Javascript

Seajs是什么及sea.js 由来，特点以及优势

Oct 13 Javascript

Angular 常用指令实例总结整理

Dec 13 Javascript

node.js学习之断言assert的使用示例

Sep 28 Javascript

帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）

Aug 23 Javascript

jquery.tagsinput.js实现记录checkbox勾选的顺序

Sep 21 jQuery

使用axios请求接口,几种content-type的区别详解

Oct 29 Javascript

JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

Mar 02 Javascript

Vue 子组件与数据传递问题及注意事项

Jul 11 #Javascript

ES6的异步终极解决方案分享

Jul 11 #Javascript

微信小程序的开发范式BeautyWe.js入门详解

Jul 10 #Javascript

实现一个 Vue 吸顶锚点组件方法

Jul 10 #Javascript

vue webpack重写cookie路径的方法

Jul 10 #Javascript

vue登录页面cookie的使用及页面跳转代码

Jul 10 #Javascript

Laravel admin实现消息提醒、播放音频功能

Jul 10 #Javascript