vue实现跑马灯效果
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实现跑马灯效果的更多相关文章
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- 使用Vue做出跑马灯效果
<div id="pmd"> <h4> {{msg}}</h4> <input type="b ...
- vue文字跑马灯效果
https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...
- Vue学习笔记四：跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- vue学习第二天：Vue跑马灯效果制作
分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
随机推荐
- 第一次接触WebSocket遇到的坑以及感受
要求用.net写一个服务,然后通过webscoket实现客户端与服务端之间的通信. 第一次知道.net还可以用来写服务,然后问题来了,服务是什么- -..下面图里的就是服务,可以停止暂停和启动. 我要 ...
- 实操：Could not autowire No beans of 'FastDFS Client' type found 的解决方法
前言: 今天接手了同事之前做的一个小项目,里面涉及到了 FastDFS 的使用.但是当我在本地运行项目的时候,却报了 Could not autowire No beans of 'FastDFS C ...
- Java设计模式 - 单例模式（创建型模式）
单例模式我在上学期看一些资料时候学习过,没想到这学期的软件体系结构就有设计模式学习,不过看似篇幅不大,介绍得比较简单,在这里我总结下单例模式,一来整理之前的笔记,二来也算是预习复习课程了. 概述 单例 ...
- 关于svn更新失败，clearup异常解决
直接上主题: 1. 下载sqlite3工具(https://files.cnblogs.com/files/eric-fang/sqlite-tools-win32-x86-3210000.zip), ...
- Elasticsearch(10) --- 内置分词器、中文分词器
Elasticsearch(10) --- 内置分词器.中文分词器 这篇博客主要讲:分词器概念.ES内置分词器.ES中文分词器. 一.分词器概念 1.Analysis 和 Analyzer Analy ...
- 使用命令行创建maven web项目
一,前言 遇到了一个非常简单的maven命令: 总的来说,这是一个用maven创建一个jersey快速开始项目的maven命令. 这次不妨使用maven命令来构建项目,看体验如何. 在文章idea m ...
- SpringBoot起飞系列-使用idea搭建环境（二）
一.环境配置 安装idea的教程就不说了,相信大家肯定已经安装好了,另外maven环境肯定也安装好了,那么我们就开始使用idea开发工具来创建一个springboot的web项目,这里奉上一个idea ...
- 23种设计模式之抽象工厂（Abstract Factory Pattern）
抽象工厂 当想创建一组密不可分的对象时,工厂方法似乎就不够用了 抽象工厂是应对产品族概念的.应对产品族概念而生,增加新的产品线很容易,但是无法增加新的产品.比如,每个汽车公司可能要同时生产轿车.货车. ...
- Cisco路由器基本使用
作者:小啊博 QQ:762641008 转载请声明URL:https://www.cnblogs.com/-bobo/ 一.路由器命令行使用 router> ...
- Linux环境下实现对文件读写操作
---- 今天分享一下在linux系统在实现对文件读写一些基本的操作,在这之前我们要掌握一些基本的技能在Linux环境下.比如查看命令和一个函数的具体用法,就是相当于查手册,在Linux下有一个man ...