程序员经验分享-hwhale

如何实现歌词在页面上使用滚动效果

2023-11-05

首先我们可以看到大多数从后端请求的数据都是这样的

 这个时候我们需要用正则以及各种循环把歌词进行重新整理为对象数据

 随后就进行页面渲染，然后我们监听歌曲播放的时间，使用添加class的方式对歌词进行高亮操作

 最后我们需要最后一步实现歌词滚动即可，我们先声明一个函数对函数内部的做改变高亮歌词的top值即可

在上面调用函数传过来当前的时间和当前播放到的索引值 

最后我们看一下效果

这样就实现了歌词滚动 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

前端

html

vuejs

如何实现歌词在页面上使用滚动效果 的相关文章

随机推荐

  • adb不能用

    tadb在抢5037端口 导致adb不能用 这时查看5703端口也没有进程占用

  • 华为OD机试 - 查找接口成功率最优时间段（Java）

    目录 题目描述 输入描述 输出描述 用例 题目解析 JavaScript算法源码 Java算法源码 Python算法源码 题目描述 服务之间交换的接口成功率作为服务调用关键质量特性 某个时间段内的接口失败率使用一个数组表示

  • 利用“箱线图”去除异常值

    包装了一个异常值处理的代码 可以调用 def outliers proc data col name scale 3 用于清洗异常值 默认box plot scale 3 进行清洗 param data 接收pandas数据格式 param

  • Python记2（函数、模块、pip、conda、@函数装饰器、一切皆对象

    目录 1 函数 方法 1 1 内置函数 1 1 1 常用函数 1 1 2 字符串转为代码 eval exec 1 1 3 排序 sorted 1 1 4 range 起始数字 结束数字 步长 1 1 5 isinstance 1 1 6 a

  • 中国版ChatGPT在哪些方面具有快速发展的机会？

    目录 一 中国巨大的市场需求 二 中国企业加速创新 三 中国的人工智能发展 四 企业愿景的推进 五 科技环境的发展 结语 ChatGPT 是一款由 OpenAI 开发的机器人聊天系统 旨在通过 AI 技术建立起人类与机器之间的自然沟通方式

  • PCL 约束Delaunay三角网（C++详细过程版）

    目录 一 算法原理 二 代码实现 三 结果展示 1 原始点云 2 普通Delaunay 3 约束Delaunay 本文由CSDN点云侠原创 原文链接 如果你不是在点云侠的博客中看到该文章 那么此处便是不要脸的爬虫 一 算法原理 首先提取边界

  • 软件开发模型

    软件开发模型 Software Development Model 是指软件开发全部过程 活动和任务的结构框架 软件开发包括需求 设计 编码和测试等阶段 有时也包括维护阶段 软件开发模型能清晰 直观地表达软件开发全过程 明确规定了要完成的主

  • 如何使用css实现三角形？

    一 前言 通常情况下 我们会使用图片或者svg去完成三角形效果图 但如果单纯使用css如何完成一个三角形呢 实现过程似乎也并不困难 通过边框就可完成 二 实现过程 在以前也讲过盒子模型 默认情况下是一个矩形 实现也很简单 div class

  • Linux如何改变文件的权限

    Linux如何改变文件的权限 权限介绍 权限更改关键字chmod 通过数字修改 通过字母修改 权限介绍 文件类型和文件权限由10个字符组成 文件的类型 表示文件 d 表示文件夹 文件权限 r 表示读权限 w 表示写权限 x 表示执行权限 第

  • 为什么很多技术都觉得前端很简单？

    多年前都没有前端这个岗位 都是后端大包大揽 今天从前端的技术发展 和复杂程度聊聊前端到底简单不简单 一 前端的深度和广度 1 复杂度 前端算是逆袭了 层出不穷的技术 显得越来越难 之前是切图 HTML CSS Js 看着很简单 实际开发起来

  • centos /dev/vda1磁盘空间占满 随笔

    今天笔者所在的公司维护的后台管理系统 突然发现系统跑不动了 打开服务器上一看 连按tab键补全命令都很困难 关键时刻来了 发现原来是磁盘空间满了 输入命令 df h 看到 dev vda1磁盘的使用率是100 既然发现是磁盘空间不够 删掉一

  • Gif多图：我常用的 16 个 Sublime Text 快捷键

    本文由 伯乐在线 cucr 翻译 黄利民 校稿 未经许可 禁止转载 英文出处 Tommy Marshall 欢迎加入 翻译组 在我做了一次包含一些现场编码的演示后 一些观众问我是如何操作这么快 当然这里没有唯一的答案 答案是一堆简单的快捷键

  • vue3 组合式api监听元素滚动，去除滚动底部多次触发滚动事件副作用，以及在当前组件对浏览器进行滚动监听时，根据组件的挂载卸载，keep-alive组件的活跃和不活跃的状态，进行添加监听和移除监听

    import onActivated onDeactivated onMounted onUnmounted from vue import throttle from underscore const scrollstate state

  • winget添加msstore软件源

    因为每次安装软件都出现两个结果 所以我卸载了msstore软件源 最近发现有些软件msstore是有的 于是又屁颠屁颠地想要加回来 添加方式如下 需要以管理员权限运行 winget source add name msstore arg h

  • 关于Nginx的一些脚本

    文章目录 目录 文章目录 前言 一 Nginx 访问日志分析脚本 二 Nginx 访问访问日志按天切割 总结 前言 脚本经常用于自动化特定任务 通过编写脚本 可以轻松地执行重复性 复杂或耗时的操作 如文件处理 数据转换 系统管理等 脚本可用

  • Linux的Java环境安装

    1 1 新建apps文件夹 mkdir apps 1 2 上传java的安装包到apps文件夹 tar zxvf java的安装包名字 进行安装包的解压 1 3 修改包名 mv 解压java的安装包名 自己修改Java安装包名 1 4 修改

  • CMD的命令集锦

    winver 检查Windows版本 wmimgmt msc 打开windows管理体系结构 WMI wupdmgr windows更新程序 wscript windows脚本宿主设置 write 写字板 winmsd 系统信息 wiaac

  • 爬取公布的招聘信息（selenium实现）

    目录 1 案例描述 2 爬虫 2 1 爬虫的概念 2 2 爬虫的工作原理 2 3 爬虫的基本流程 3 基本操作 3 1 安装第三方库 3 2 库的作用及其使用

  • html实时显示log,websocketd 实现浏览器查看服务器实时日志

    操作系统 CentOS7 下载 websocketd 安装 nc 命令 yum install nmap ncat 创建监听脚本 cat gt cmd sh lt bin bash pkill x nc while do nc nkl 10

  • 如何实现歌词在页面上使用滚动效果

    首先我们可以看到大多数从后端请求的数据都是这样的 这个时候我们需要用正则以及各种循环把歌词进行重新整理为对象数据 随后就进行页面渲染 然后我们监听歌曲播放的时间 使用添加class的方式对歌词进行高亮操作 最后我们需要最后一步实现歌词滚动即

热门标签