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

Javascript 相关文章推荐
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
javascript用函数实现对象的方法
May 14 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
javascript基础知识
Jun 07 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 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
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
JavaScript构建自己的对象示例
2016/11/29 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
canvas 实现中国象棋
2017/02/17 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
学校教师安全责任书
2014/07/23 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2014小学年度工作总结
2014/12/20 职场文书
小学班主任个人总结
2015/03/03 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS