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 ...
随机推荐
- 回炉重造之重读Windows核心编程-002-字符集
使用Unicode的优势: 便于在不同语言之间进行数据交换. 让你的exe或者dll文件支持所有的语言. 提高应用程序的执行效率. Windows2000是使用Unicode重新开发的,核心部分都需要 ...
- 使用HSSFWorkbook导出、操作excel
原文地址:https://www.jianshu.com/p/dd1e4f28757b 在实际开发中我们经常需要导入数据,统计数据,并且将统计好的数据导出excel,今天分享一个导出学生信息的方法. ...
- 浅谈background的用法
div css 背景样式background属性 一.语法及参数 1.语法:background : background-color(颜色) || background-image(图片地址) || ...
- AI Web 2.0
kali: 192.168.0.103 目标机:192.168.0.105 0X01 扫描端口和目录 a)扫描端口 开启了80和22端口 b)扫描目录 看到两个敏感字样的目录 尝试访问/webadmi ...
- Quartz.NET - 教程 5: 简单触发器
译者注: 目录在这 Quartz.NET 3.x 教程 原文在这 Lesson 5: SimpleTrigger 如果你需要在特定的时间点执行一次作业, 或者在特定的时间点执行一次作业, 然后在特定的 ...
- 离散对数及其拓展 大步小步算法 BSGS
离散对数及其拓展 离散对数是在群Zp∗Z_{p}^{*}Zp∗而言的,其中ppp是素数.即在在群Zp∗Z_{p}^{*}Zp∗内,aaa是生成元,求关于xxx的方程ax=ba^x=bax=b的解, ...
- 【45】谷歌 Inception 网络简介Inception(1)
谷歌 Inception 网络简介(Inception network motivation) 构建卷积层时,你要决定过滤器的大小究竟是1×1,3×3还是5×5,或者要不要添加池化层.而Incepti ...
- Apache Solr Velocity模板注入rce+获取交互式shell
前言: 官方的poc.exp payload只能获取很低的命令执行权限,甚至有些符号.命令还被过滤了,例如管道符被过滤.并且不能写入.下载文件,不能使用管道符重定向文件.那么我们只能通过获取到交互式s ...
- 数据库MySQL之存储过程
存储过程的定义 存储过程是一种在数据库中存储复杂程序,以便外部程序调用的一种数据库对象.其在思想上与面向对象编程中函数的定义与调用一致,存储过程只是SQL语言维度上的封装与运用. 存储过程的优缺点 优 ...
- WinForm WebBrowser 设置IE版本
public enum IeVersion { IE7 = , IE8 = , IE9 = , IE10 = , IE11 = }; /// <summary> /// 修改注册表信息来兼 ...