使用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 ...
随机推荐
- VUE相关面试题目01
一.MVVM是什么; MVC: MVVM的描述: 常见库实现数据双向绑定的效果: 发布订阅模式; ...
- python Queue（队列学习）
Python 的Queue模块中提供了同步的.线程安全的队列类,包括FIFO(先入先出)队列Queue,LIFO(后入先出)队列LifoQueue,和优先级队列PriorityQueue.这些队列都实 ...
- win10edge浏览器个人账户退出登录后再次登录自动登录问题
edge浏览器退出登录后,再次点击登录以同步数据会自动登录,可查看书签等个人数据 解决方法: 先在浏览器里面退出账户. 1.设置--电子邮件和账户--管理 2.登录后--安全--安全仪表板--高级安全 ...
- HTML笔记（二） HTML标签元素
一 常用的头部元素标签 <head>元素包含了所有的头部标签元素. 1.<title> <title>标签定义了HTML文档的标题,在HTML/XHTML文档中是必 ...
- windows tips
u启动经典dos工具实现硬盘分区教程 https://jingyan.baidu.com/article/a3f121e4dbe55afc9052bbfe.html?st=2&net_type ...
- postman 8.7.0 下的cookie 禁用
简介:以下过程描述在postman8.7.0中,如何禁用掉cookie,使每次请求都带空cookie去请求服务器. 有一个简单投票场景.投票连接是一个get请求, 类似如http://domain/t ...
- Python：合并两个列表成为一个list
如何合并两个列表,今天就来探讨一下: 方法一:最笨的方法实现 list1=[1,2,3]list2=[4,5,6]new_list=[]for item in list1: new_list.appe ...
- 模拟多路开关mux的数据耦合问题
1.前言 最近在做有关sensor的项目时遇到了一个关于多路选择器引起的数据耦合问题,具体的问题现象和解决方案如下: 2.多路开关的介绍 2.1 概述 多路开关:在多路被测试的信号公用一路A/D转换器 ...
- 近期调研和使用 zeromq 与 cppzmq 的一些问题
关于message 消息分片 消息分片的发送 消息分片允许将多个消息封装成一条消息.在发送自定义协议数据时,我们经常需要在消息前"填充"一个包头.如下代码,在发送的时候加上 zmq ...
- java多线程--7 线程协作 线程池
java多线程--7 线程协作 线程池 并发协作模型--生产者消费者模式 这是一个线程同步问题,生产者和消费者共享同一个资源,并且生产者和消费者之间互相依赖,互为条件. java提供了几个方法解决线程 ...