vue实现跑马灯效果为阿中哥哥应援

1、效果图

2、实现代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跑马灯</title>

    <!-- 引入vue.js-->

    <script src="./lib/vue.js"></script>

</head>

<body>

<div id="app">

    <button @click="show">应援</button>

    <button @click="stop">暂停</button>

    <h3 v-text="message"></h3>

</div>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            message:"阿中阿中勇敢飞，中华儿女永相随~~~",

            timer:null //在data上定义定时器timer，默认为null

        },

        methods:{

            show(){

                if(this.timer != null) return;

                this.timer = setInterval(() => {

                    //获取到头的第一个字符

                    let start = this.message.substring(0,1);

                    //获取到后面的所有字符

                    let end = this.message.substring(1);

                    //重新拼接得到新的字符串，并赋值给this.message

                    this.message = end + start;

                },300)

            },

            stop(){

                //清除定时器

                clearInterval(this.timer)

                //清除定时器之后，需要重新将定时器置为null

                this.timer = null

            }

        }

    })

</script>

</body>

</html>

vue实现跑马灯效果的更多相关文章

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

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

  2. 使用Vue做出跑马灯效果

     <div id="pmd">         <h4> {{msg}}</h4>         <input type="b ...

  3. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

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

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

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

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

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

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

  7. TextView跑马灯效果

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

  8. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  9. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

随机推荐

  1. Spring Cloud 系列之 Spring Cloud Stream

    Spring Cloud Stream 是消息中间件组件,它集成了 kafka 和 rabbitmq .本篇文章以 Rabbit MQ 为消息中间件系统为基础,介绍 Spring Cloud Stre ...

  2. NodeManager概述(基本职能和内部架构)

    概述 NodeManager是运行在单个节点上的代理,它需要与应用程序的的ApplicationMaster和集群管理者ResourceManager交互: 从ApplicationMaster上接收 ...

  3. at org.apache.jsp.WEB_002dINF.pages.login_jsp._jspInit( login_jsp.java:22)

    SEVERE: Servlet.service() for servlet jsp threw exception java.lang.NullPointerException at org.apac ...

  4. JSR303 后端校验包的使用

    1.首先通过Maven导入JSR303架包. <!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate- ...

  5. 2018年蓝桥杯java b组第二题

    2.标题:方格计数 如图p1.png所示,在二维平面上有无数个1x1的小方格. 我们以某个小方格的一个顶点为圆心画一个半径为1000的圆.你能计算出这个圆里有多少个完整的小方格吗? 注意:需要提交的是 ...

  6. [经验栈]SQL语句逻辑运算符"AND"、"&&"兼容性

    最近打算把博客转移到typecho平台,选了一个风格个人比较喜欢的主题,即Akina for Typecho 主题模板,在这里先感谢题主的开源分享,但是在使用过程中一开始就出现"500 Da ...

  7. Spring框架（三）

    对象依赖关系 Spring中,如何给对象的属性赋值?  [DI, 依赖注入] 1) 通过构造函数 2) 通过set方法给属性注入值 3) p名称空间 4)自动装配(了解) 5) 注解 代码示例: &l ...

  8. 基于C#的机器学习--c# .NET中直观的深度学习

    在本章中,将会学到: l  如何使用Kelp.Net来执行自己的测试 l  如何编写测试 l  如何对函数进行基准测试 Kelp.Net是一个用c#编写的深度学习库.由于能够将函数链到函数堆栈中,它在 ...

  9. layDate——初步使用

    layui系列中layDate的使用教程网址 https://www.layui.com/laydate/ 我这里简单举例: 1.引入js <script type="text/jav ...

  10. Spring IOC（2）----如何注册bean定义

    前面说到IOC容器在刷新之前的一些初始化工作,现在来看看在refresh()方法中,是怎样来加载注册我们自己的bean定义的. refresh()方法中有很多功能,从注释中就可以看出来 我们本次重点关 ...