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 ...
随机推荐
- php面试笔记（7）-php基础知识-文件及目录处理考点
本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而文件及目录处理 ...
- Linux内存管理解析(二) : 关于Linux内存管理的大体框架
什么是内存管理 ? 首先内存管理管理的主要对象是虚拟内存,但是虚拟内存对应的映射主要为物理内存,其次也可能通过交换空间把虚拟内存与硬盘映射起来,既然如此,那我们先了解物理内存的管理. 对于物理内存而言 ...
- Java中的合并与重组（上）
通过优锐课核心java学习笔记中,我们可以看到,码了很多专业的相关知识, 分享给大家参考学习. 虽然在Git中合并和重组是相似的,但它们具有两种不同的功能. 要保持自己的历史记录整洁或完整,这是你应该 ...
- 《C# 6.0 本质论》 - 学习笔记
<C# 6.0 本质论> ========== ========== ==========[作者] (美) Mark Michaelis (美) Eric Lippert[译者] (中) ...
- BOS只读状态修改
update T_META_OBJECTTYPE set FSUPPLIERNAME ='PAEZ',FPACKAGEID =null
- 2020年如何成为一个高级AVA架构师（50W~100W年薪）
2020年如何成为一个高级AVA架构师(50W~100W年薪)
- css 隐藏滚动条
如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...
- day18 正则表达式初学
正则规则:客观存在的,世界上任何一种语言都能使用它. 在线测试网址:http://tool.chinaz.com/regex 正则语句:只和字符串相关,需要考虑的是:在同一个位置上可以出现的字符范围 ...
- node模块化开发基本知识学习笔记
传统非模块化开发缺点: 1.命名冲突 2.文件依赖 标准的模块化规范: 1.AMD-requirejs 2.CMD-seajs 服务器端模块化规范: 1.CommonJS-Node.js 模块化相关的 ...
- MySql -- check 约束
6.CHECK 约束:用于限制列中的值的范围 在一些情况下,我们需要字段在指定范围的输入,例如:性别只能输入 '男'或者'女',余额只能大于0等条件,我们除了在程序上控制以外,我们还能使用 CHECK ...