<!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. hdu1005-Number Sequence-（循环节）

    题意:已知f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7,给出A,B,n,求f(n) 题解:n巨大,循环肯定超时,在模7的 ...

  2. Educational Codeforces Round 78 (Rated for Div. 2) B. A and B

    链接: https://codeforces.com/contest/1278/problem/B 题意: You are given two integers a and b. You can pe ...

  3. 【mybatis】JdbcType 与Oracle、MySql数据类型对应关系

  4. Python面向对象 | isinstance和issubclass

    isinstance(a,b):判断a是否是b类(或者b类的基类)实例化的对象 class A: pass class B(A): pass obj = B() print(isinstance(ob ...

  5. django请求限制

    django.views.decorators.http 包里的装饰器可以基于请求的方法来限制对视图的访问. 限制视图只能服务规定的http方法.用法: from django.views.decor ...

  6. selenium篇之滑动验证码

    一.介绍 现在出现了一种通过用户鼠标移动滑块来填补有缺口图片的验证码,我们叫做滑动验证码.它的原理很简单,首先生成一张图片,然后随机挖去一块,在页面展示被挖去部分的图片,再通过js获取用户滑动距离,以 ...

  7. webpack中的hash、chunkhash、contenthash区别

    hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CD ...

  8. vb.net 以读文本文件的方式对XML文件进行遍历

    '    对XML文件按照文本文件的方式进行遍历 Private Sub checkFile_establishEntity(strFile As String) Dim reader AsTextR ...

  9. 异步IRP的教训(已附DUMP)

    [教训]异步IRP中,IoSetCompletionRoutine()要在IoCallDriver()的前面,不然底层驱动完成了读写之后,找不到完成例程,会导致出错.看似简单,不小心却可能带来大麻烦. ...

  10. 【技术博客】使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试

    目录 使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试 简介 PhpStorm中的远程开发 1. 配置服务器 2. 配置路径对应 3. 配置同步 4. 进行代码同步 5. 优点 ...