<!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. Spring AOP技术本质认识

    Spring AOP技术本质认识 一.AOP简介   AOP(Aspect Oriented Programming,面向切面编程),把某一类问题集中在一个地方进行处理,比如处理程序中的点击事件.打印 ...

  2. IEnumerable、IEnumerator接口（如何增加迭代器功能）

    IEnumerable.IEnumerator接口封装了迭代器功能,有了它,我们不需要将内部集合暴露出去,外界只需要访问我的迭代器接口方法即可遍历数据. 在C#中,使用foreach语句来遍历集合.f ...

  3. 【JZOJ5740】【20190706】幻想世界

    题目 小 $\omega $ 想要进行烟火表演,她一开始有\(n\)颗彗星和\(n\)颗陨石 如果小 \(\omega\) 有\(i\)颗彗星而没有陨石,那么她会消耗\(i\)颗彗星并得到\(a_i\ ...

  4. POI开发：Java中的Excel相关操作

    一.Apache POI 1.简介: Apache POI支持大多数中小规模的应用程序开发,提供API给Java程序对Microsoft Office格式档案读和写的功能,呈现和文本提取是它的主要特点 ...

  5. spring boot 源码解析52-actuate中MVCEndPoint解析

    今天有个别项目的jolokia的endpoint不能访问,调试源码发现:endpoint.enabled的开关导致的. 关于Endpoint, <Springboot Endpoint之二:En ...

  6. c++ 二维数组定义 二维数组首地址查询

    #include <iostream> using namespace std; int main() { ][] = { {,,}, {,,} }; cout << &quo ...

  7. Delphi微信支付【支持MD5和HMAC-SHA256签名与验签】

    作者QQ:(648437169) 点击下载➨微信支付            微信支付api文档 [Delphi 微信支付]支持付款码支付.二维码支付.订单查询.申请退款.退款查询.撤销订单.关闭订单. ...

  8. Nginx Tutorial #1: Basic Concepts（转）

    add by zhj: 文章写的很好,适合初学者 原文:https://www.netguru.com/codestories/nginx-tutorial-basics-concepts Intro ...

  9. centos7安装mysql初始化报错

    [root@localhost bin]# ./mysqld --initialize --user=mysql2019-09-16T06:15:28.835202Z 0 [Warning] TIME ...

  10. 示例：WPF开发的简单ObjectProperyForm用来绑定实体表单

    原文:示例:WPF开发的简单ObjectProperyForm用来绑定实体表单 一.目的:自定义控件,用来直接绑定实体数据,简化开发周期 二.实现: 1.绑定实体对象 2.通过特性显示属性名称 3.通 ...