<!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. angular 小技术点

    angular 标签 ng-options ng-model ng-checked ng-true-value ng-false-value ng-if ng-src delete $location ...

  2. Anaconda3（5-2）程序编辑器 win10下PyCharm安装及配置Pytorch流程

    由于破解和付费问题,不推荐.优先用自带的spyder Win10 下PyCharm安装流程:(1)官网:https://www.jetbrains.com/pycharm/download/#sect ...

  3. Codeforces Round #603 (Div. 2) E - Editor（线段树，括号序列）

  4. 五一DAY1数论学习笔记

    by ruanxingzhi 整除性 如果a能把b除尽,也就是没有余数,则我们称a整除b,亦称b被a整除.(不是除以,是整除!!) 记作:\(a|b\) |这个竖杠就是整除符号 整除的性质 自反性 对 ...

  5. 并发设计模式：Immutability模式

    多个线程同时读写同一共享变量存在并发问题,其中的必要条件之一就是 读写 ,如果没有写,只存在读,是不会存在并发问题的. 如果让一个共享变量只有读操作,没有写操作,如此则可以解决并发问题.该理论的具体实 ...

  6. ORA-25153错误及解决办法

    出现下图错误 原因就是没有临时表空间,所以要建立临时表空间,下面的语句,记得把地址换成你自己想放的地方. alter tablespace temp add tempfile 'C:/temp.dbf ...

  7. makefile通用版本（三）

    DIR_INC = ./include DIR_SRC = ./src DIR_OBJ = ./obj DIR_BIN = ./bin DIR_LIB = -Wl,-rpath=/home/exbot ...

  8. iptables man手册翻译

    概要 iptables [-t table] -[AD] chain rule-specification [options]iptables [-t table] -I chain [rulenum ...

  9. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

  10. ASP.NET Core Swagger接入使用IdentityServer4 的 WebApi

    写在前面 是这样的,我们现在接口使用了Ocelot做网关,Ocelot里面集成了基于IdentityServer4开发的授权中心用于对Api资源的保护.问题来了,我们的Api用了SwaggerUI做接 ...