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. charles 高亮Hosts

    本文参考:charles 高亮Hosts Focus Host是焦点域名的:这里配置好的可以在结构视图中,单独拎出来显示: 如下图,在把zhubangbang.com设为焦点域名,在视图中是下图这么展 ...

  2. 自动更新Aria2中的bt-trackers选项

    #!/bin/bash /usr/sbin/service aria2 stop list=`wget -qO- https://raw.githubusercontent.com/ngosang/t ...

  3. [Leetcode][动态规划] 第931题 下降路径最小和

    一.题目描述 给定一个方形整数数组 A,我们想要得到通过 A 的下降路径的最小和. 下降路径可以从第一行中的任何元素开始,并从每一行中选择一个元素.在下一行选择的元素和当前行所选元素最多相隔一列. 示 ...

  4. 多源最短路径算法—Floyd算法

    前言 在图论中,在寻路最短路径中除了Dijkstra算法以外,还有Floyd算法也是非常经典,然而两种算法还是有区别的,Floyd主要计算多源最短路径. 在单源正权值最短路径,我们会用Dijkstra ...

  5. VMware CentOS7 安装

    一.软硬件准备 作者:小啊博 QQ:762641008 转载请声明:https://www.cnblogs.com/-bobo 1.准备Centos7镜像 软件:推荐使用VMwear,我用的是VMwe ...

  6. Ceph 的 'MAX AVAIL' 和 数据平衡 - Storage 6

    1. 客户环境 节点数量:4个存储节点 OSD数量:每个节点10块8GB磁盘,总共 40 块OSD Ceph 版本: Storage 6 使用类型:  CephFS 文件 CephFS数据池:  EC ...

  7. ArchLinux安（重）装指南

    说实话,我其实是不想要出这篇博客的.在我这一个月安装Arch的过程中,让我感触比较深的一点是: 没有谁比这个系统的官方更懂它. 尤其是这种比较复杂的系统,更是如此. 这几天,我经历了一次重装,系统坏了 ...

  8. 怎样实现给DEDE5.7的栏目增加栏目图片

    前两天用DEDE做二次开发的时候,遇到一个问题,领导让给每个栏目增加一个栏目图片的功能,网上找了些东西,结合自己实际做的时候的方法,下面详细描述下具体的实现方式(只测试了V5.7版本,对低版本是否适用 ...

  9. 从零开始搭建WebAPI Core_SqlSugar管理系统 (持续更新中......)

    从零开始搭建WebAPI Core_SqlSugar管理系统 前言 本系列皆在从零开始逐步搭建,后台管理系统服务端部分,后续还会推出前端部分. 这次的目的是搭出一个功能完善的 本次系列技术栈以下几个部 ...

  10. SpringBoot返回JSON

    目录 1.SpringBoot返回JSON简介 2.整合jackson-databind 3.整合Gson 4.整合fastjson 1.SpringBoot返回JSON简介 随着web开发前后端分离 ...