使用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 ...
随机推荐
- mmdetection可视化工具-DetVisGUI
保存数据 执行程序,需要保存输出结果的pkl文件或者json文件 下面以测试faster_rcnn示例: 在执行测试时可以使用下面这条命令,就会将结果保存到一个pkl文件中. python tools ...
- sql年、季度、月的第一天
SELECT dateadd(yy,datediff(yy,0,getdate()),0) select dateadd(qq,datediff(qq,0,getdate()),0) select d ...
- HttpRunner4.x版本调试测试用例时报错 run testcase failed error="abort running due to failfast setting: variable XXX not found" 解决方法
httprunner脚本调试报错 未知变量名称未定义问题 解决了,由于请求的requestBody证件照片链接包含$关键字,需要使用$$转义. 执行脚本报错截图 接口requestBody参数截图 ...
- Must be called at the top of a `setup` function vue3使用vue-i18n时出现的报错
在某js文件中引入 import {useI18n} from "vue-i18n"; 使用:useI18n().t('APP_LOADING') 修改后: import i18n ...
- win10开启休眠
powercfg /hibernate on 管理员模式下的命令提示符
- webpack之loader与plugin
loader与plugin的区别 loader的作用是将代码进行转换,比如less转成css,一个loader就是一个函数,接收的参数是上一个loader的返回值,loader进行一系列处理后 返回新 ...
- 👋 和我一起学【Three.js】「初级篇」：0. 总论
「和我一起学 XXX」是我 2023 年的一个新企划,目的是向读者(也包括未来的自己)介绍我正在学习的某项新技术.文章会通过长期反复迭代的方式保持其内容的新鲜度.文章有较大内容更新时,会在文章开头进行 ...
- MySQL Mock大量数据做查询响应测试
上个迭代版本发布后,生产环境业务同事反馈仓配订单查询的页面加载时间过长. 因为页面原来是有的,这次开发是在原来基础上改的,因此没有额外做性能.测试环境只调用接口请求了少量数据去验证功能.在对比该迭代添 ...
- mybatis-plus #和$的使用场景
#防止sql注入,但是会把里面的内容默认为是字符串 $使用场景:如果条件查询要加入数据权限判断,那么久需要使用$符号而不是#符号
- Codeforces Round #648 (Div. 2) A~F题解
开始补cf了,还是记录一下,加深思路,打的应该都是div2.题面不截图了,直接说题意,思路,代码. A 题意:给一个01矩阵,两个人轮流填格子,仅当第i行,第j列全为0时才能填,不能填的人输,问谁赢? ...