<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>跑马灯</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

    <div id="app">

    <h4>{{ msg }}</h4>

    <input type="button" value="启动" @click="start">

    <input type="button" value="启动1" @click="start1">

    <input type="button" value="停止" @click="stop">

    </div>

<script>

    new Vue({

        el: '#app',

        data: {

        msg:"猥琐发育，别浪~~~~",

        intervalId:null //定义定时器ID

        },

    methods: {

        start:function(){

            //substring来进行字符串截取，把第一个字符截取出来，放到最后一个位置即可

            //为了实现点击下按钮，自动截取字符串。在截取代码放在定时器里面

            var _this = this;

            if(_this.intervalId == null){

            _this.intervalId = setInterval(function(){

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

                var start = _this.msg.substring(0,1);

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

                var end = _this.msg.substring(1);

                //重新拼接新的字符串

                _this.msg = end + start;

                }

            ,400);

            }

        },

        start1:function(){

            //箭头函数外面和里面的this保持一致

            this.intervalId = setInterval(() => {

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

                var start = this.msg.substring(0,1);

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

                var end = this.msg.substring(1);

                //重新拼接新的字符串

                this.msg = end + start;

                }

            ,400);

        },

        stop(){

            clearInterval(this.intervalId)

            this.intervalId = null;

            }

        }

    })

</script>

</body>

</html>

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

  1. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

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

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

  3. Android:TextView文字跑马灯的效果实现

    解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...

  4. 在android中用跑马灯的效果显示textview

    大家好,在我们通常的android project中,通常需要用到textview这一个布局文件,并且对于这一个显示布局所需要的文本文字内容. 下面我们就来介绍一种方法来实现在android中用跑马灯 ...

  5. Android 高级UI设计笔记05：使用TextView实现跑马灯的效果

    1. 使用TextView属性实现跑马灯的效果: (1). 新建一个Android工程,命名为"MarqueeTextViewDemo",如下: (2). 来到activity_m ...

  6. JAVA 跑马灯文字效果

    JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...

  7. 它们的定义TextView使之具有跑马灯的效果

    一.引入问题 使用通用textview快乐效应,焦点事件不启动滚动,button目前的焦点事件,但丑,因此,需要定制TextView 天生焦点 个textview FocusedTextView.ja ...

  8. android使用TextView实现跑马灯的效果（1）

    android使用TextView实现跑马灯的效果 1.activity_main.xml <?xml version="1.0" encoding="utf-8& ...

  9. OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo

    这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...

随机推荐

  1. Thinkphp5.0支付宝支付扩展库类库大全

    Thinkphp5.0支付宝支付扩展库类库大全,包括手机网站支付.电脑网站支付.支付查询.退款.退款查询.对账单等. Thinkphp5.0支付宝调用方法: 电脑网站支付 Pagepay.php 调用 ...

  2. flask sqlchemy 多对多的自引用关系定义

    多对多的定义可以使用关联表,或者重新定义一个模型,通过模型定义多对多的自引用在flask web开发书里有讲到,这里主要演示用关联表定义的方法. from flask_sqlalchemy impor ...

  3. IIS下uploadify上传大文件出现404错误（提示上传文件大小超过400M）

    原因:由于IIS7下的默认设置限制了上传大小,所以Web.Config中的大小设置也就失效了. 解决步骤: 1.打开IIS管理器,找到Default Web Site(也就是你的发布站点),先进行停止 ...

  4. java Thread 类的源码阅读（oracle jdk1.8）

    java线程类的源码分析阅读技巧: 首先阅读thread类重点关注一下几个问题: 1.start() ,启动一个线程是如何实现的? 2.java线程状态机的变化过程以及如何实现的? 3. 1.star ...

  5. http协议，servlet的生命周期

    1.http协议(http协议是无状态的) http协议是指计算机通信网络中两台计算机进行通信必须共同遵守的规定或规则,它允许将超文本标记语言(html)文档从web服务器传送到客户端的浏览器(目前我 ...

  6. docker swarm集群搭建以及使用滚动更新

    基础环境,三台虚拟机 172.17.3.70 172.17.3.71 172.17.3.72 系统配置:centos 7,关闭selinux 需要优化的基础配置: [root@sw1 ~]# vim ...

  7. 读取文件不是真实的具体路径 setZh.ini

    读取 c:\windows\Syswow64\XX\XX.ini 时内容不正确. 发现真实文件为: C:\Users\用户名\AppData\Local\VirtualStore\Windows\Sy ...

  8. Your branch and remoteBranchName have diverged solution

    (zhuan)git pull时解决分支分叉(branch diverged)问题 git pull时出现分支冲突(branch diverged) $ git status # On branch ...

  9. c#+.net常用功能点

    1.比较差集合,排除不在集合中的,即data是data1排除data2剩下的数据 var data1 = new List<string>(); var data2 = new List& ...

  10. LR基本知识学习

    性能测试基础 本质:基于 协议 模拟用户发请求,对服务器形成一定的负载,来测试服务器的性能指标是否满足要求,与界面无关 * 时间 * 空间 分类: 性能(狭义):特定条件下,验证  系统是否有宣称具有 ...