<!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. 详细解说Windows 8.1与Windows 8的区别（Win8.1与Win8区别）

    详细解说Windows 8.1与Windows 8的区别(Win8.1与Win8区别) 本文转自“吾乐吧软件站”,原文链接:http://www.wuleba.com/?p=23082 最近,吾乐吧软 ...

  2. 使用shell命令给文件中每一行的前面、后面添加字符

    shell command shell给一个文件中的每一行开头插入字符的方法:awk '{print "xxx"$0}' fileName shell给一个文件中的每一行结尾插入字 ...

  3. SpringBoot学习笔记1

    1.什么是SpringBoot 用一些固定的方式来构建生产级别的spring应用.spring boot推崇约定大于配置的方式便于你能够快速的启动并运行程序. 2.为什么要学spring boot j ...

  4. Django03-视图系统views

    一.编写视图 一个视图函数,是一个简单的Python函数,它接受web请求,并且返回web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . . 是 ...

  5. Matplotlib-画图种类

    Scatter 散点图 本节我们将讲述各种不同的plot的方式.之前我们讲到了如何plot线,今天我们讲述如何plot散点图. # 首先,先引入matplotlib.pyplot简写作plt,再引入模 ...

  6. mysql设置远程访问

    Mysql远程访问设置,容许远程连接本地数据库. 1.进入本地Mysql安装目录bin下,登录Mysql, 如图: 2.  切换数据库到内置的名为“mysql”的数据库,可以看到下面的一个名为“use ...

  7. python基础系列教程，数学基础系列教程，数据分析系列教程，神经网络系列教程，深度学习系列视频教程分享交流

    大家好,我是一个技术爱好者,目前对大数据人工智能很是痴迷,虽然学历只有高中,目前正在大踏步的向着人工智能狂奔,如果你也想学习,那就来吧 我的学习进度python基础(Numpy,pandas,matp ...

  8. Mybatis的学习1

    ORM 关系数据库需要按对象来处理,出现ORM设置,列对应类的属性,行对应对应类的实例,也就是每一行对应一个新的实例,对应类是需要实现序列化(implements Serializable  - im ...

  9. crontab,定时任务执行找不到库or shell可执行，crontab 定时任务下就不能执行,tensorflow,ImportError: libcuda.so.1: cannot open shared object file: No such file or directory

    在线上启动一个定时任务,但是起来查看,发现任务执行找不到库,报cuda错误: ImportError: libcuda.so.1: cannot open shared object file: No ...

  10. mysql判断表里面一个逗号分隔的字符串是否包含单个字符串、查询结果用逗号分隔

    1.mysql判断表里面一个逗号分隔的字符串是否包含单个字符串 : FIND_IN_SET select * from tablename where FIND_IN_SET(传的参数,匹配字段) 例 ...