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 ...
随机推荐
- JS杨辉三角形
题目:打印出杨辉三角形(要求打印出10行如下图) 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 分析: 1.第1列或列数=行数时,value=1 2.其余的值 ...
- js—求数组中的最大最小值
参考链接:https://www.w3cplus.com/javascript/calculate-the-max-min-value-from-an-array.html Math.min.appl ...
- MS14-068提权和impacket工具包提权
ms14-068提权 工具利用 a)拿下边界机win7,并已经有win7上任意一个账号的密码 -u 用户名@域 -p 用户密码 -s 用户sid -d 域控 ms14-068.exe -u test3 ...
- 伟大的悲剧——记CSP2019
伟大的悲剧——记CSP2019 就算伟大,依然悲剧…… 现在我好恨自己 我……差一点……就是省一了…… 这一点是多少呢? 2分! 1名! 省一65人,我第66! 唉……太悲催了…… jx的分数线居然还 ...
- cf999E (强联通分量模板题）
给出n个点m条边的有向图,问至少添加多少条边使得任何点都可以从s点出发可达 #include<bits/stdc++.h> #define forn(i, n) for (int i = ...
- .NET知识梳理——6.lambda
1. lambda 1.1 匿名方法lambda表达式 Lambda表达式 Lambda是一个匿名方法,实例化委托的一个参数,编译的时候会产生一个密封类,同时增加一个方法. Lambda ...
- 37.Python自定义过滤器
自定义模板过滤器 1.首先在某个app中,创建一个python包,叫做"templatetags",注意,这个包的名字一定要是"templatetags",否者 ...
- 浅谈python的第三方库——numpy（一）
python作为广受欢迎的一门编程语言,其中很重要的一个原因便是它可以使用很多第三方库. 对第三方库的理解,在笔者看来就是一些python爱好者和专门的研发机构,为满足某一特定应用领域的需要,使用py ...
- 【58】目标检测之YOLO 算法
YOLO 算法(Putting it together: YOLO algorithm) 你们已经学到对象检测算法的大部分组件了,在这个笔记里,我们会把所有组件组装在一起构成YOLO对象检测算法. ...
- 如何选择JavaScript构建工具之Babel、Browserify、Webpack、Grunt以及Gulp
当我们开始一个新的 JavaScript 项目时,我们需要考虑的第一件事就是搭建一个前端编译环境.但是在面对众多的 JavaScript 构建工具时,我们却无所适从,不知道究竟哪一个才是最适合我们的. ...