<!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="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-使用计时器实现跑马灯效果的更多相关文章

  1. vue制作滚动条幅-跑马灯效果实例代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 第二章 Vue快速入门--10-11 跑马灯效果制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. Vue学习笔记四：跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  4. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  6. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  7. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  8. Dom操作--跑马灯效果

    这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...

  9. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

随机推荐

  1. 【java异常】Unable to install breakpoint in

    这个是断点失效,把那个断点双击清理掉就完了. 具体原因,以后再写.

  2. OpenCV 学习笔记（16）open创建无边框的显示窗口

    https://blog.csdn.net/weixin_41794771/article/details/93198098 讲解地址 // 1获取窗口句柄 winName 窗口名字 HWND win ...

  3. zzulioj - 2617 体检

    题目链接: http://acm.zzuli.edu.cn/problem.php?id=2617 题目描述: VX玩了这么多游戏以后,感觉自己身体素质和智商都有所下降,所以决定去医院体检一下.已知V ...

  4. [PHP] Elasticsearch 6.4.2 的安装和使用

    Elasticsearch 6.4.2 的安装和使用 一.安装http://www.ruanyifeng.com/blog/2017/08/elasticsearch.htmlhttps://www. ...

  5. HTML基础知识---文本编辑练习

    飘柔兰花去油洗发水液露去屑止痒控油                                         阿道夫净屑舒爽清洁头皮去屑洗发水520ml                      ...

  6. Spring Boot进阶系列四

    这边文章主要实战如何使用Mybatis以及整合Redis缓存,数据第一次读取从数据库,后续的访问则从缓存中读取数据. 1.0 Mybatis MyBatis 是支持定制化 SQL.存储过程以及高级映射 ...

  7. php form表单ajax上传图片方法

    form表单ajax上传图片方法 先引用jquery.form.js 前台代码<pre><form id="form1"> <input id=&qu ...

  8. php扩展模块 opcache安装教程

    php扩展模块 opcache安装教程PHP5.5.0以后版本自带Opcache加速器,但默认情况下木有启用.所以编译PHP的时候 我们想要启用该PHP加速器就应该添加参数 : –enable-opc ...

  9. Laravel集成Swoole教程

    1.准备工作 安装 Laravel laravel new laravel-swoole     本人使用 valet 进行开发,可以使用 laravel-swoole.test     进行访问 2 ...

  10. ElasticSearch 线程池类型分析之 ResizableBlockingQueue

    ElasticSearch 线程池类型分析之 ResizableBlockingQueue 在上一篇文章 ElasticSearch 线程池类型分析之 ExecutorScalingQueue的末尾, ...