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文本中文字 ...
随机推荐
- Day3 目录结构及文件管理
Windows:以多根的方式组织文件C : D: E: F: linux:以单根的方式组织文件 / 2.存放命令相关的目录 /bin 普通用户的使用的命令 /bin /ls ,/bin/da ...
- .NET Core 3.0即将发布！
期待已久的.NET Core 3.0即将发布! .NET Core 3.0在.NET Conf上发布.大约还有9个多小时后,.NET Conf开始启动. 为期3天的大概日程安排如下: 第1天-9月23 ...
- 删除mac开机启动项
1､开“系统偏好设置”窗口,选择“用户与群组”,进入用户与群组窗口.选择登录项选项卡,再解锁,最后删除开机启动的应用. 2､分别在以下6个目录中检查是否有与anydesk相关的plist文件 ~/ ...
- 【Win10】时钟精确到秒
[Win10]时钟精确到秒 前言 想要桌面右下角的时钟"xx:xx:xx"精确到秒,可以使用绿色免费开源软件Dism++,也可以从该软件的代码中读到方法:用注册表实现. 步骤 进入 ...
- SpringBoot和Hibernate整合
1.先使用idea创建maven项目(这个就不详细讲了,很简单的操作) 2.创建完maven项目之后添加springboot依赖,pom.xml文件如下: <?xml version=" ...
- PHP的跨域问题
服务端的代码 public function test(){ header("Access-Control-Allow-Origin: http://cnblogs.com"); ...
- 【linux】【docker】docker及docker-compose安装
安装 一. docker安装 Centos 安装docker18.03 wget https://download.docker.com/linux/centos/7/x86_64/stable/Pa ...
- Scala Class etc.
Classes 一个源文件可包含多个类,每个类默认都是 public 类字段必须初始化,编译后默认是 private,自动生成 public 的 getter/setter :Person 示例 pr ...
- Shell之变量
目录 Shell之变量 参考 变量命名规则 变量语法规范 四种变量类型 系统变量 特殊变量 变量的使用 变量内容的删除和替换 Shell之变量
- 死磕 java线程系列之自己动手写一个线程池
欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. (手机横屏看源码更方便) 问题 (1)自己动手写一个线程池需要考虑哪些因素? (2)自己动手写 ...