抒深-CSDN博客

原创 vue实现歌词与播放时间同步

引言作为音乐播放器没有歌词怎么行！实现结果如下：在上一篇博文中我们已经讲了如何将从后台返回的歌词解析为我们所需要的格式，那么本篇的目的就是将这些歌词渲染到屏幕上并实现动态滚动效果。1.先将歌词渲染到页面<ul> <li v-for="(item, index) in lyric" :key="index" > {{ item.str }} </li></ul>lyric为解析好的歌词。2.接着给他加上一点

2021-05-12 15:21:13 1794

原创解析neatEaseMusic歌词

引言由于从后台返回的歌词格式有许多种，今天主要讲的是网易云音乐的后台歌词解析。1.首先我们来看看网易云返回给我们的歌词格式是什么样的。以梅梅的歌曲为例：返回的歌词是如上格式的字符串。每一行有一个换行符，并且前面一部分是播放当前歌词的时间，后面一部分是歌词。因此，首先我们得先把歌词给切分开来，得到我们想要的数据。2.根据自己的项目需求解析为具体格式。我将会把歌词拆分为如下格式：lyricArr = [ { time: '00:00.000', lyric: '作词： T

2021-05-10 17:58:26 461

原创 CSS动态控制图片选择

animation本身是具有停止动画和开始动画的属性的即：animation-play-state它有2个属性值可以选择（running/paused）分别控制动画的状态，那么我们可以通过绑定动态属性的方式给当前需要旋转的元素添加状态。html部分<img :class="{ imgTurn: isTurn }" :style="{ '--isTurn': start ? 'running' : 'paused' }"/>2.CSS部分.imgTurn { anima

2021-04-30 14:29:43 178

原创 CSS图片底边3像素问题

在写项目中常常会遇到要使得图片居中垂直对齐的时候，但是由于图片底部的3像素原因，使得结果并不能满足要求。如下图1.形成原因：图片元素默认为inline-block所引起。2.解决方法(1).给img图片标签添加属性vertical-align:top;（不是baseline即可）：img{ vertical-align:top;}(2).img的父标签添加属性：font-size：0；父标签{ font-size:0;}(3).给图片添加属性：display:block;

2021-04-30 11:54:29 302

原创 vuex在刷新页面时数据清空

今天在使用vuex管理数据时，发现页面刷新后数据清空了。后来查了些资料，发现vuex的数据是存储在内存中，页面刷新时，内存将会被释放，并会重新加载js脚本，变量重新赋值。所以如果想要做到数据持久化，就需要将数据存储在localstorage,seassionstorage或者cookie里。例如://在store/index.js中修改如下state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state'

2021-04-23 22:07:30 2093

原创事件轮循机制

引言：1.浏览器内核的主要组成部分：1.js引擎：解析和执行js代码2.html/css解析器:负责解析html/css文件3.布局和渲染模块:负责页面的布局计算和渲染4.DOM事件处理模块：处理dom事件回调(click…)5.定时器模块:处理定时器事件6.网络请求模块：处理ajax请求我们需要知道在js代码里，像dom事件回调、定时器、网络请求都是交给浏览器来负责管理。2.js本身是单线程的，单线程也分为主线程和分线程。3.js所处理的代码也分同步任务与异步任务。4.异步任务分为宏

2021-04-20 16:28:40 306

原创构造函数的8种方式

引言：没有绝对优秀的构造函数的方法，每一种方法都有他们的优缺点，我们需要考虑的是知道他们的应用场景，合理的使用他们，从而达到自己的要求。1.Object构造函数模式使用方式：先创建空对象，再添加属性/方法适用场景：起始时不确定对象内部的数据缺点：语句太多var person = new Object()person.age = 15person.name = 'Bob'person.run = function () { console.log('run');}2.对象字面量使

2021-04-19 10:41:47 14596

原创 vscode 配置代码块

1.找到配置区域设置–>用户代码片段–>选择你要配置什么文件的代码段–>配置你想要的代码段2.代码段(1)javascript{ // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the s

2021-04-17 13:05:08 607

原创 JavaScript数据类型及判断方法

1.数据类型1.基本数据（值）类型String:字符串类型Number:数字类型boolean:布尔值类型 true/falsenull:nullundefined:undefined2.对象（引用）数据类型Object:任意对象Array:一种特别的对象（存储有顺序，数值下标）Function:一种特别的对象（可以执行）2.判断数据类型typeof:可以判断：undefined/number /string /boolean/functioninstanceof:判断对象的”

2021-04-16 16:02:16 194

原创 url到页面渲染经历了什么过程

1.首先对域名进行DNS解析查找缓存（浏览器，系统，路由，网路运营商，递归搜索）2.TCP链接，三次握手第一次，浏览器，我要发送请求了第二次，服务器，你发，我晓得了第三次，浏览器，那我发了3.发送请求请求报文：就是发送内容4.接受响应响应报文：晓得了，接好了。5.页面渲染1.如果浏览器发现是响应报文里是html文件。那么就会先调用html解析器2.然后解析为dom树，遇到style/link，就是css，然后解析为cssom树3.遇到script，调用JavaScript解析器，绑

2021-04-15 22:57:01 220

原创 vscode 常用插件

1.语言包英文转中文2.css tree可以把写好的标签生成css格式首先选中然后shit + ctrl + p 选择 Generate CSS tree 会生成如下文件3.easy less将less文件编译为其它css文件在setting.json里可以设置把less文件编译为什么类型文件。例如：当保存less文件后会生成一个新的wxss文件4.One Dark Pro 颜色主题就是看着舒服5.vscode icons还是好看...

2021-04-15 22:52:38 95

原创 vscode 快捷键

vscode 快捷键1.shift + 上下箭头选中文本2.Alt + 上下箭头切换当前文本的位置3.Ctrl + D 手动替换多个相同单词先选中该单词再按住Ctrl 通过多次点击D键选择多个单词4.Alt + Ctrl + 上下键设置多行光标5.Ctrl + 鼠标左键选择多个不同位置光标6.Ctrl + H 替换7.Ctrl + shift + 鼠标左键选中块区域8.shift + Alt + A 多行注释9.Ctrl + / 单行注释10.自定

2021-04-15 22:28:13 395

原创 git的安装和简单使用

1.下载使用镜像下载地址速度更快http://npm.taobao.org/mirrors/git-for-windows/通过鼠标滚轮我们可以看到最近发布的版本，选择你需要的版本即可，一般没有特殊要求可以选择最新版前几个版本，相对稳定。2.安装无脑安装就完了 next到底基本没有什么需要注意这里选择自己的文本编辑器，比如我的是vscode，所以选第四个3.配置环境变量git不需要配置环境它已经帮我们添加好了4.简单使用通过鼠标右键我们会发现他已经配置好了git使用工具

2021-04-11 22:05:44 144 1

原创什么是javaScript

1,简介JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的脚本语言。2.组成部分（1）ECMAScript，由ECMA-262定义，提供核心语言功能。ECMA-262规定了这门语言的组成部分：语法，类型，语句，关键字，保留字，操作符，对象。而ECMAScript是实现该标准规定的各个方面内容的语言的描述。（2）文档对象模型（DOM），提供访问和操作网页内容的方法和接口。（3）浏览器对象模型（BOM），提供与浏览器交互的方法和接口。...

2021-04-10 09:33:35 90

原创原型链的理解

前言本文通过从构造函数开始，从无到有的带你分析什么是原型链。前景提示：_proto_为隐式原型prototype 为显示原型1.首先构造一个函数对象Person，这里之所以叫函数对象是因为它既是一个函数也是一个对象，后面会进行讲解。函数对象本身是具有prototype属性的，并且该属性指向它的原型，而它原型又有一个constructor属性证明该原型是由函数对象所构造出来的。2.然后利用该函数对象new一个实例对象person出来。你需要知道每一个对象上都有一个_proto_属性，并且该属性

2021-04-09 09:51:00 1678

原创 Cookie和token的区别

文章目录前言一、基于cookie的身份验证二、基于token的身份验证前言HTTP是一种“无状态”协议，它的每个请求都是完全独立的，每个请求中包含了处理这个请求所需的完整的数据，发送请求不会涉及到状态变更。举个例子：你第一次去A店买了苹果，然后你第二次去买苹果时你和老板说我上次来过，能便宜点不，他说他不认识你，并且无论你去他那买多少次苹果他都不认识你。他只知道有人来买过苹果，具体是谁他不知道。所以在浏览器向服务端请求数据的过程中就延伸出一种严重的问题–数据泄露，许多Web应用程序的安全和正常运行都

2021-03-25 23:00:22 4006

m0_45309753的博客