vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）

随机变速的动态打字特效–最终效果

随机变速的动态打字特效–完整代码

<template><div class="contentBox"><span>{{showContent}}</span><span v-if="showBlinkCursor" class="blinkCursor">|</span></div>
</template>
<script>export default {mounted() {let that = thislet index = 0;var myFunction = function () {clearInterval(timer);if (index < that.allContent.length) {that.interval = Math.random() * 500that.showContent += that.allContent[index]index++;timer = setInterval(myFunction, that.interval);} else {that.showBlinkCursor = false}}var timer = setInterval(myFunction, that.interval);},data() {return {interval: 100,showBlinkCursor: true,showContent: '',allContent:"多想一醒来 晨风就能抚平忧伤\n" +"多想一转身 目光就融化掉冰霜\n" +"多想一抬头 看见你微笑的脸庞\n" +"多想你能够 把喜怒哀乐对我讲\n" +"多想一家人 心朝着同一个方向\n" +"多想一路上 包容着温暖的体谅\n" +"多想一放下 世界就还给你梦想\n" +"多想你知道 爱就在我心底流淌\n" +"生活总该迎着光亮\n" +"再跌跌撞撞也要坚强\n" +"数着流星降落你肩膀\n" +"而我一直陪伴在你身旁\n" +"生活总该迎着光亮\n" +"失望过后拥抱更多希望\n" +"夜的尽头叫做阳光\n" +"手中的幸福 终将会绽放"}}};
</script>
<style scoped>.contentBox {white-space: pre-wrap;}.blinkCursor {animation: Blink 1s ease-in 0s infinite;}@keyframes Blink {0% {opacity: 0;}100% {opacity: 1;}}
</style>

css 闪烁光标

<span class="blinkCursor">|</span>

    .blinkCursor {animation: Blink 1s ease-in 0s infinite;}@keyframes Blink {0% {opacity: 0;}100% {opacity: 1;}}

js 动态改变setInterval定时器的时间间隔

var interval = 500
var myFunction = function () {// 必须先清除掉定时器，再重新创建定时器，才能改变时间间隔clearInterval(timer);interval = Math.random() * 500timer = setInterval(myFunction, interval);
}
var timer = setInterval(myFunction, interval);

vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）相关推荐

2022最新面试题（含css、html、js、es6、Vue）
2022.4.22 这段时间准备换工作,陆陆续续面了一下外包和正经公司,总结一下遇到的面试问题和答案.持续更新. 本文只记录重点答案,每条下面会贴一个详细讲解这个问题的链接,想要详细了解问题答案及原理 ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
动态网页常用的两种数据加载方式ajax和js动态请求
欢迎关注"生信修炼手册"! 对于静态网页,我们只需要访问对应的URL就可以获得全部的数据了,动态网页则没有这么简单.比如以下网站 http://q.10jqka.com.cn/zj ...
MUI 里js动态添加数字输入框后，增加、减少按钮无效
https://www.cnblogs.com/ssjf/p/10193652.html numbox 的自动初化是在 mui.ready 时完成的 mui 页面默认会自动初始化页面中的所有数字输入框 ...
属性值动态调整_【第1603期】CSS 自定义属性：使用篇
前言好的文章值得多看两眼.今日早读文章由@kmokidd翻译分享. 正文从这开始-- 可读性更高的 CSS 代码在读过 [第1596期]CSS 自定义属性:基础篇后,我们可以开始着手优化代码了,通 ...
html上传动态图片不显示图片,解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
html动态添加图片不显示不出来,解决 viewer.js 动态更新图片导致无法预览的问题...
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
动态打字效果 html,html5 svg酷炫的打字动画特效
特效描述:html5 svg打字动画特效.html5 svg在input文本框里面输入文字,酷炫的动态打字动画特效. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 const sel ...
SQLIO 模拟随机或者顺序的方式来测试磁盘IO的性能
SQLIO 功能:磁盘IO压力测试工具,SQLIO主要是模拟随机或者顺序的方式来测试磁盘IO的性能. SQLIO Disk Subsystem Benchmark Tool工具下载地址: http:/ ...

vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）

随机变速的动态打字特效–最终效果

随机变速的动态打字特效–完整代码

css 闪烁光标

js 动态改变setInterval定时器的时间间隔

vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）相关推荐

最新文章

热门文章