使用Vue.js实现文字跑马灯效果
实现文字跑马灯效果，首先用到 substring()截取 和 setInterval计时器 clearInterval()清除计时器
效果如下：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯效果</title>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"
type="application/javascript"></script>
</head>
<body>
<div id="app">
<button @click="lang">开始</button>
<button @click="stop">结束</button>
<h1> {{pao}} </h1>
</div>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
pao: '这是一个会跑的文字~~~~~~',
setInterval: null
}
},
methods: {
lang() {
//阻止lang再次执行
if (this.setInterval != null) return
// 使用substring截取字符串
this.setInterval = setInterval(() => {
console.log(this.pao);
//获取头一个 字符
let qian = this.pao.substring(0, 1)
//获取后面的所以字符
let hou = this.pao.substring(1)
//将获取到的字符拼接起来
this.pao = hou + qian
}, 300)
},
stop() {
clearInterval(this.setInterval)
//每次清除计时器是 将setInterval 重新赋值为 null
this.setInterval = null
}
}
})
</script>
</body>
</html>
以上是实现文字跑马灯效果，如有不足的地方，欢迎在评论区留言。
使用Vue.js实现文字跑马灯效果的更多相关文章
- Android开发：文本控件详解——TextView（二）文字跑马灯效果实现
一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...
- 用jQuery实现参数自定义的文字跑马灯效果
一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...
- JavaScript小实例-文字跑马灯效果
我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...
- js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
- vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue文字跑马灯效果
https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...
- VUE之文字跑马灯效果
VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 实现一个微信小程序组件：文字跑马灯效果
marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...
- [转]实现文字跑马灯效果，scrolling text from right to left
<div> <marquee direction="left" behavior="scroll" scrollamount="10 ...
随机推荐
- Javaheima21
Java 学习内容 XML XML解析技术 XPath 设计模式 在有些业务场景下,存储数据或者传输数据给别人的时候,数据需要满足优点的规范进行组织 XML文件存储的数据需要提取出来 如何方便的在XM ...
- MPC
Just for anyone searching for code. I found it here: https://drive.google.com/drive/folders/0BzLEHBD ...
- Java代码结构
Java代码结构 顺序结构 Java的基本结构为顺序结构,除非特别指明,否则从上到下一句一句执行 选择结构 if单选择结构 if(condition){ doSomething(); } if双选择结 ...
- Sublime Text3汉化好的绿色免安装版使用和破解教程+下载链接
这个资源是我从官网上面下载好的Sublime Text3绿色版,然后通过网上的教程汉化之后再压缩的.理论上下载完之后,解压就可以用了,不过由于是绿色版,可能需要调一下默认打开方式.才好直接双击打开.绿 ...
- Glinux 1395 build ENV setup
1.安装ubuntu 14.04.05 LTS 64bit 2.初始化root 密码 sudo passwd Password: <--- 输入安装时那个用户的密码 Enter new UN ...
- bash transpose csv
transpose() { awk ' BEGIN { FS = ","; OFS = ","; } { if (max_nf<NF) max_nf=NF ...
- shell多进程并发数控制
在批量执行任务时,单进程执行速度太慢,使用&不加数量控制,又担心资源占用过多,导致宕机等问题,因此我们需要控制并发进程的数量,保证效率的同时,保证资源占用不会太高. 其中一个解决思路是利用简单 ...
- finereport连接mysql8.0
1.java包更新 2.下载地址:https://dev.mysql.com/downloads/connector/j/ 3.替换文件为8.0删除5.1版本 4.驱动器手动输入com.mysql.c ...
- ssh基于主机名访问
登录一台服务器我们可以用ssh user@IP这种方式 还有一种快捷的方式,就是基于主机名访问,这需要先配置 /etc/hosts文件 假如我们又两台主机 192.168.75.131/165 分别为 ...
- DRF_序列化and反序列化之高级
1. source用法 序列化器内的使用 book_name = serializers.CharField(max_length=8, min_length=3,source='name')这个用来 ...