<!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. wordpress调用自定义post_type文章

    前面我们讲了wordpress添加post_type自定义文章类型,我们现在来讲一下如何把自定义文章调用出来,我们以product为例,虽然我们自定义好了 Post Type 同时也编写了一些内容,但 ...

  2. CNCF LandScape Summary

    CNCF Cloud Native Interactive Landscape 1. App Definition and Development 1. Database Vitess:itess i ...

  3. NOIP 2002 选数

    洛谷 P1036 选数 洛谷传送门 JDOJ 1297: [NOIP2002]选数 T2 JDOJ传送门 Description ​ 已知 n 个整数 x1,x2,-,xn,以及一个整数 k(k< ...

  4. 二分类问题F-score评判指标（转载）

    分类模型的评价指标Fscore 小书匠深度学习 分类方法常用的评估模型好坏的方法. 0.预设问题 假设我现在有一个二分类任务,是分析100封邮件是否是垃圾邮件,其中不是垃圾邮件有65封,是垃圾邮件有3 ...

  5. Python、Spyder的环境搭建

    有什么不对欢迎大家指出,一起交流啊,只针对Windows!!!!(苹果买不起...)Python安装的话2.7版本和3.6版本都可以,虽然2.7比较全面,但还是建议安装3.6,这里以3.6为例进行介绍 ...

  6. 10 张图带你深入理解 Docker 容器和镜像

    这篇文章希望能够帮助读者深入理解 Docker 的命令,还有容器(container)和镜像(image)之间的区别,并深入探讨容器和运行中的容器之间的区别. 当我对 Docker 技术还是一知半解的 ...

  7. python cython c 性能对比

    我们用以下方法计算百万以上float型数据的标准偏差,以估计各个方法的计算性能: 原始python numpy cython c(由cython调用) python 原始方法: # File: Std ...

  8. Alpha冲刺(7/10)——2019.4.29

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 ...

  9. Cmder下ssh免密登录配置

    1.本地生成ssh-key 在本地cmder终端下运行下面的命令生成ssh的公钥和私钥文件: ssh-keygen -t rsa 其中,.ssh/id_rsa为私钥文件,留在本地使用,而.ssh/id ...

  10. spring cloud 服务容错保护 - Hystrix

    1.为什么要断路器 在微服务架构中通常会涉及到多个服务间调用,处于调用链路底层的基础服务故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供 ...