Vue实现跑马灯的效果
<!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实现跑马灯的效果的更多相关文章
- vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- Android:TextView文字跑马灯的效果实现
解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...
- 在android中用跑马灯的效果显示textview
大家好,在我们通常的android project中,通常需要用到textview这一个布局文件,并且对于这一个显示布局所需要的文本文字内容. 下面我们就来介绍一种方法来实现在android中用跑马灯 ...
- Android 高级UI设计笔记05：使用TextView实现跑马灯的效果
1. 使用TextView属性实现跑马灯的效果: (1). 新建一个Android工程,命名为"MarqueeTextViewDemo",如下: (2). 来到activity_m ...
- JAVA 跑马灯文字效果
JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...
- 它们的定义TextView使之具有跑马灯的效果
一.引入问题 使用通用textview快乐效应,焦点事件不启动滚动,button目前的焦点事件,但丑,因此,需要定制TextView 天生焦点 个textview FocusedTextView.ja ...
- android使用TextView实现跑马灯的效果（1）
android使用TextView实现跑马灯的效果 1.activity_main.xml <?xml version="1.0" encoding="utf-8& ...
- OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo
这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...
随机推荐
- Jmeter5.1.1创建一个http请求的压力测试
1.首先添加一个线程组,在线程组中,配置压力情况 2.然后在线程组中,添加取样器,添加http请求:配置web服务器协议(http/https).服务器名称或IP.端口号.请求方法.路径等参数 3.然 ...
- zabbix使用SNMPV3协议监控交换机
SNMPV3是简单网络管理协议的第三版,因为其安全性更高,现在的中低端交换机已普遍支持该协议,所以在生产环境中我们应该采用SNMPV3对交换机.路由器进行管理. 首先在交换机上要配置SNMPV3协议, ...
- Java学习随笔（1）--groovy爬虫
package com.fan import com.fission.source.httpclient.ApiLibraryimport com.fission.source.httpclient. ...
- Netty从入门到精通到放弃
有时间想记录一下关于Netty的知识. 第一课:传统IO的特点. package com.example.aimei.controller; import java.io.InputStream; i ...
- JAVA设计方法思考之如何实现一个方法执行完毕后自动执行下一个方法
今天编程时,突然想起来在一些异步操作或Android原生库的时候,需要我们实现一些方法, 这些方法只需要我们具体实现,然后他们会在适当的时候,自动被调用! 例如AsyncTask,执行玩doInBac ...
- Linux命令:dirs
语法 dirs [-clpv] [+N | -N] 说明 打印目录栈内容. 不带任何参数,在一行里打印.空白分隔. /home/code/dir/crypto /home/code/a/b /home ...
- ReactiveX 学习笔记（26）使用 RxJS + React.js 调用 REST API
JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...
- 系统分析与设计个人作业:WordCount
本次作业gitee地址:https://gitee.com/ackary/WordCount 一.项目简介 1.基础功能 基础功能部分主要实现的功能是统计一个程序设计语言源文件的字符数.单词数.行数, ...
- IDEA连接数据库自动生成实体类
1.连接数据库 (1)按下图 , 点击view-----选择tool windows----------选择database并点击 (2)弹出Database窗口,点击加号--------- ...
- scrapy 断点续爬
第一步:安装berkeleydb数据库 第二部:pip install bsddb3 第三部:pip install scrapy-deltafetch 第四部: settings.py设置 SPID ...