vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" :value="startBtn" @click="startRoll" />
<input type="button" :value="endBtn" @click="endRoll" />
<p>{{content}}</p>
</div>
</body>
<script type="text/javascript">
var test = function(){
alert("hello")
}
var vm = new Vue({
el:'#app',
data:{
startBtn:'开始滚动',
endBtn:'停止滚动',
content:'中国加油，武汉人民加油，我们一定可以战胜疫情的！',
intervalId:null
},
methods:{
startRoll(){
if(this.intervalId != null){return}
this.intervalId = setInterval(function(){
console.log(vm)
var first = vm.content.substring(0,1)
var end = vm.content.substring(1,vm.content.length)
vm.content = end + first
console.log(vm.content)
},500)
},
endRoll(){
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
</script>
</html>
效果：
vue制作滚动条幅-跑马灯效果实例代码的更多相关文章
- 自定义有焦点的TextView实现广告信息左右一直滚动的跑马灯效果
import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; imp ...
- javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果
之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...
- Android TextView 横向滚动（跑马灯效果）
Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- 安卓之文本视图TextView及跑马灯效果
一.基本属性和设置方法 二.跑马灯用到的属性与方法说明 三.省略方式的取值说明 四.跑马灯效果案例代码 (1)布局xml文件 <?xml version="1.0" en ...
- android:ellipsize实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
- android:ellipsize实现跑马灯效果总结
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说都是 ...
- android ellipsize的使用及实现跑马灯效果总结
参考资料: http://blog.csdn.net/huiwolf2008/article/details/7901084 http://www.cnblogs.com/Gaojiecai/arch ...
随机推荐
- [MongoDB]评估使用mongodb的五个因素
企业选择 NOSQL 或非表格结构数据库,评估时应从以下五个关键维度来考虑:• 数据模型的类型• 查询模型是否能满足灵活的查询需求• 事务模型类型,以及一致性属于强一致性还是最终一致性• APIs 的 ...
- 删掉以前的旧Flow，创作现在的新节奏
2017年开始实习,现已2020年.三年又三年.今天我删掉无知的从前,进入新世界. 无论活的多累 做人不进则退 只能自我激励 将这当做基地
- Android.bp文件简介
Android.bp是用来替换Android.mk的配置文件,它使用Blueprint框架来解析.Blueprint是生成.解析Android.bp的工具,是Soong的一部分.Soong则是专为An ...
- sed命令简介
sed处理时,有2个缓冲区:[pattern space]和[hold space] sed执行过程: 先读入一行,去掉尾部换行符,存入[pattern space],执行编辑命令. 处理完毕,除非加 ...
- UNIX环境高级编程-第三章习题
1,当读写磁盘文件时,read,write等函数确实是不带缓冲机制的吗?请说明原因. 答:所有磁盘I/O都要经过内核的块缓存区(即内核的缓冲区高速缓存).唯一例外的是对原始磁盘设备的I/O,但是我们不 ...
- C#设计模式学习笔记：(6)适配器模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,记录一下学习过程以备后续查用. 一.引言 从今天开始我们开始讲结构型设计模式,结构型设 ...
- MySQL安装详细步骤(附迅雷下载链接）
环境:windows10.64bit.mysql 8.0.19 迅雷下载链接8.0版本 https://cdn.mysql.com//Downloads/MySQLInstaller/mysql-in ...
- NB-Iot和GPRS信号通信模式的对比
NB-Iot和GPRS信号通信模式的对比
- C语言再学习part3—算法
君子远庖厨,万物皆备于我.—孟子 这篇文章主要总结程序的主要要素,以及程序的构成是什么样子的.最后说说我学到的一种奇特的表示算法的方式—伪代码. 让我们开始吧! 一个程序应该包括以下两个主要要素: 1 ...
- ArcGIS Runtime SDK for Android 加载shp数据，中文乱码问题
针对ArcGIS10.2版本的解决办法(默认中文编码为OEM): 现有一个图层名称为“图层.shp”,以此为例: 1.拷贝一个cpg文件,修改名称为“图层.cpg”,并用文本打开cpg文件修改编码为“ ...