前端小白
文章平均质量分 72
这里是杂七杂八的前端知识总结,
react vue node echarts 等 请看各自专栏。
小R.
总之岁月漫长,然而值得期待
展开
-
vue使用 APlayer+Meting实现音乐播放,支持多平台音乐:网易云、腾讯、虾米、酷狗、百度
我之前写过一篇博客:使用 APlayer 实现音乐播放器,虽然 APlayer 让我实现了想要的音乐播放器效果,但是音频列表 audio 的音频链接、音频封面、歌词等,是需要自己去补充的。 那么这些数据从哪里来呢? 我昨天有发愁一会儿会儿,也去搜了获取音乐列表的接口,可以发请求去获取数据嘛。 也有瞅见MetingJS,A powerful plugin connect APlayer and Meting,一个连接APlayer和Meting的功能强大的插件,附上GitHub地址:https原创 2022-04-24 11:35:00 · 4193 阅读 · 7 评论 -
实现随机标签,字体大小、颜色随机显示
最近写毕业,想实现一下如下图所示的效果(这里以学弟个人博客里的为示例): 如上图所示,随机标签,字体颜色随机,字体大小随机。 下面贴一下我的实现代码。 <template></template>中的代码:<router-link v-for="item in tagList" :key="item.id" :to="`/tag/${item.id}`" :style="{ color: getColor(), fontSize: getSiz原创 2022-04-19 10:51:42 · 1908 阅读 · 1 评论 -
使用 APlayer 实现音乐播放器
最近写毕设,想要实现一个音乐播放功能。大概样子如下面的图所示: 还有吸顶效果,吸顶在左下角: 下面来说一下实现过程。一、安装npm install aplayer --saveyarn add aplayer二、引入import 'APlayer/dist/APlayer.min.css';import APlayer from 'APlayer';三、使用 首先是<template></template>标签里的代码:<div id原创 2022-04-11 11:23:01 · 2789 阅读 · 5 评论 -
在 vue 中使用 vue-typed-js 实现打字机效果
这篇博客和我的博客:原生 JS 实现打印机效果,一个字一个字出现,再一个字一个字消失,如此循环是实现的相同功能——打字机效果。即,一个字一个字出现,再一个字一个字消失,如此循环。如下图为大概样子: 我是在用原生js实现后看到typed.js这个js插件,进而找到了 vue-typed-js这个插件的,上面还有react的,位置如下图所示。 下面说一下 vue-typed-js这个插件的使用。一、安装npm install --save vue-typed-js二、引入import V原创 2022-04-11 11:07:08 · 7519 阅读 · 7 评论 -
原生 JS 实现打印机效果,一个字一个字出现,再一个字一个字消失,如此循环
最近写毕设时候,打算实现一个打印机效果放在首页,即,一个字一个字出现,再一个字一个字消失,如此循环。如下图为大概样子: 最初我是用原生js实现的。只不过感觉代码有点…冗余吧,但是功能是没问题的,亲测可用。下面粘贴一下代码: 首先是 html代码:<div class="desc"> <span id="text"></span> <span id="bar">|</span></div> 然后是 js代码原创 2022-04-11 11:05:42 · 2613 阅读 · 0 评论 -
你不知道的JavaScript 上卷 Part1
这篇博客躺在我的草稿箱里有一阵子了,差点给遗忘了哈哈。前言 最近开始喜欢读一些书,从书中找答案,在阅读中查漏补缺。 记得小学初中时候最爱看书了,如今却不知怎的,习惯性从网络中摄取知识,搜寻到的东西真真假假,甚至很多大同小异,读一些书,还是很有必要的。 《你不知道的JavaScript》上卷 直面当前 JavaScript 开发人员不求甚解的大趋势,嗯,说的就是我这种人,不求甚解,很多东西好像知道,问深了,又好像什么都不知道。 好了,长话短说,以便再次阅读,我阅读中做了以下笔记,希望帮到原创 2022-02-18 16:36:08 · 894 阅读 · 0 评论 -
json-server 的基本使用
最近在跟着尚硅谷学习axios时,发现了json-server,以前没了解过甚至没听说过这个东西,所以就来做个记录啦。一、什么是json-server 在平时的项目开发中,当后端还没有提供接口时,我们可能会选择mock数据,这个时候就可以选择json-server,来模拟请求和响应的过程。 可以这么理解,json-server是一个在前端本地运行,可以存储json数据的server。 github地址:https://github.com/typicode/json-server二、原创 2022-02-11 16:52:25 · 2694 阅读 · 2 评论 -
axios源码模拟实现
一、分析文件结构/dist/ 输出目录,最后输出的axios整体文件axios.js 未压缩的axios.min.js 压缩后的/lib/ 源码目录,所有的源代码都放在这里/adapters/ 请求的适配器http.js 实现http适配器(包装 http包),在 node.js向远程服务器发送请求时使用xhr.js 实现 xhr适配器(包装 xhr对象),在浏览器端发送请求时使用/cancel/ 定义取消功能Cancel.js 构造函数,用来创建取消时的错误对象Ca原创 2022-02-11 15:07:47 · 1646 阅读 · 0 评论 -
一文掌握 axios 基础
最近在公司实习,又到我技术分享了,看了看大家之前分享的,一时想不到分享啥了,发愁ing… 突然想起来最初面实习时,被问过 axios,就来系统的学习一下啦,看有没有什么可以作为分享的,害。一、axios 是什么 axios是一个基于promise的HTTP 网络请求库,可以作用于浏览器和 node.js中。它是 isomorphic的,即同一套代码可以运行在浏览器和node.js中。 在服务端它使用原生 node.js 的 http模块发送HTTP请求。 在客户端 (浏览器端)使用原创 2022-02-09 18:45:04 · 3218 阅读 · 0 评论 -
卑微实习生来补 Git 了
一、什么是Git Git是一个免费的、开源的 分布式版本控制系统 ,可以快速高效地处理从小型到大型的各种项目 。 Git易于学习,占地面积小,性能极快 。 它具有廉价的本地库 ,方便的暂存区域和多个工作流 分支 等 特性。 其性能优于 Subversion、 CVS、 Perforce和 ClearCase等 版本控制工具。二、什么是版本控制 版本控制是一种记录文件内容变化,以便将来查阅特定版本修订情况的系统。 版本控制其实最重要的是可以记录文件修改历史记录,从而让用户能够查看历史版本,方原创 2021-08-04 21:38:37 · 171 阅读 · 3 评论 -
如何在码云上创建项目
1、点击新建仓库2、输入仓库名称,注意下面的多选框不要勾选,然后点击创建3、点击后进入下图所示界面,同时点击键盘上的 window+r,输入cmd,然后进行 git 全局设置,依次输入下图框选内容4、如果已有 git 仓库,输入下图所示第二个框的内容,如果没有,输入第一个框的内容,这里我走第二个框。具体步骤如下:首先打开自己已经创建好的项目,然后cmd,依次输入下面代码git initgit status//查看状态git add .//把所有文件都添加到暂存区git com原创 2021-03-13 17:03:15 · 1326 阅读 · 0 评论 -
前端学科面试题(来自硅谷视频)
一、作用域和值类型引用类型的传递题1:作用域var num1 = 55;var num2 = 66;//100function f1(num, num1) { // var num =55; // var num1 = 66; num = 100;//100 num1 = 100;//100 num2 = 100;//100 console.log(num);//100 console.log(num1);//100 console.log(num2);//100}// 55原创 2021-03-10 09:31:53 · 555 阅读 · 2 评论 -
一篇博客教你掌握 typescript
TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。相较于JS而言,TS拥有了静态类型、更加严格的语法、更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;...原创 2021-01-15 17:42:58 · 390 阅读 · 2 评论 -
如何写出漂亮的 数字字体
我们先来看看效果图,如下图所示: 我是在写 react 项目时候用到的这个东西,那我就以在 react 项目写出 漂亮的数字字体为例,总结一下。 首先我引入了文件,如下图所示:(需要文件的 私信或留言) 然后我在 css 中引入了字库:/*引用字库*/@font-face { font-family: electronicFont; src: url(../font/DS-DIGI-1.ttf);} 具体路径根据情况写。 最后,在需要设置的位置进.原创 2020-09-04 22:03:13 · 2247 阅读 · 1 评论 -
csdn——markdown如何自动生成索引
markdown如何自动生成索引? 答:使用@[TOC]命令即可自动生成目录。 前提是目录已用 标题 标明。示例如下:@[TOC]# 一、一级标题## 1、二级标题### (1)正文### (2)正文## 2、二级标题### (1)正文### (2)正文# 二、一级标题## 1、二级标题### 正文## 2、二级标题### 正文文章目录一、一级标题1、二级标题(1)正文(2)正文2、二级标题(1)正文(2)正文二、一级标题1、二级标题正文2、二级标题正文一、一级标题原创 2020-07-27 20:23:40 · 973 阅读 · 1 评论 -
csdn——markdown常用写作技巧
文章目录一、标题1、使用 # 号可表示 1-6级标题一级标题二级标题三级标题四级标题五级标题六级标题2、使用 = 和 - 可标记一级和二级标题这是一个一级标题这是一个二级标题二、插入链接或图片1、插入链接:2、插入图片:三、调整图片大小和格式1、调整大小:2、调整格式:四、字体样式1、字体:2、字号大小:3、格式:4、字体颜色:五、文本样式1、对齐方式:2、背景色:六、插入表格1、使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行2、三种对齐方式七、分隔线八、删除线九、下划线十、区块1、特殊符号&g原创 2020-07-27 20:12:43 · 532 阅读 · 0 评论 -
安装 Webstorm 的 mongodb 插件:Mongo Plugin
1、2、点击 Plugins ,在搜索框输入,点击 install 下载,下载后重启一下 Webstorm :3、下载成功后,会多出这样一个窗口:原创 2020-05-13 20:18:51 · 605 阅读 · 0 评论 -
如何用 postman 测试接口
一、启动 postman :启动后显示如下图所示界面:二、如何使用 postman ,如何用 postman 测试接口:1、创建项目文件夹,输入名称点击 Creat :**2、选择 请求方式 ,粘贴进去 url ,设置参数,点击 Send ,就可以测试接口了。在下方会有测试结果: **3、点击 Save As ,输入名称,选择文件夹,可以将其保存进文件夹,方便下次使用:点击 Save 后,会看到下图所示:如此便实现了用 postman 测试接口,具体情况大家可以在哔哩哔哩上看硅原创 2020-05-13 15:28:38 · 2261 阅读 · 0 评论 -
经常使用的npm安装和卸载命令
1、如何安装本地包安装到 node_modules 目录下:npm install <package_name>安装并写入package.json的”dependencies”中:npm install <package_name> --save安装并写入package.json的”devDependencies”中:npm install <pack...原创 2020-04-01 09:58:03 · 2499 阅读 · 0 评论 -
码云推送代码后不显示贡献度
有次发现自己的码云贡献度超低,明明推了代码,但是当日贡献度仍不显示。后来才发现是因为——本地git和码云帐号的不一致。 解决方法如下:1、查看当前git用户名git config user.name2、查看当前git邮箱git config user.email3、切换码云上的git用户名git config --global user.name "你的用户名"4、切换...原创 2020-04-01 09:48:02 · 973 阅读 · 1 评论 -
IDEA、webstom版本回退,找回历史代码
在推拉项目时,我们会遇到代码冲突的状况,也会出现代码丢失。除了提前复制好一份代码外,我们还可以怎样找回之前的代码呢? 如果你是用IDEA、webstom写代码,可进行如下操作: 1. 右键点击代码区域 2. 选择Local History ——> show History。如下图: 3. 选择你要回退的代码,点击Revert,代码便回退成功。如下图:...原创 2020-03-31 09:41:59 · 688 阅读 · 0 评论 -
CSDN—Markdown编辑器之如何插入emoji表情
日常写博客时候总是忍不住想要加个表情包来更好的表达个人感情色彩,以前都是用这种:“O(∩_∩)O哈哈~”、“o(╥﹏╥)o”,但是这种表情包太少而且总觉得用着不怎么舒服,于是去网上一搜,搜出来一堆,开心得不得了????先分别附上两款表情包官网第一种????:https://www.webfx.com/tools/emoji-cheat-sheet/这个网站的表情包是这种类型(列举仅为一小部分表...原创 2019-12-22 11:27:13 · 753 阅读 · 1 评论 -
实现导航下滑消失上滑出现效果
年初考核了一次自适应,选择的是华为官网。最近听学弟说不知道怎么实现下滑消失上滑出现效果,就把那次考核的代码整理了一下,分享给大家。先来看看效果图:首先来看看html代码:<div class="whiteTop"> <!--白色顶部--> <div class="container"> <div class="hw"> &l...原创 2019-12-08 09:45:05 · 2060 阅读 · 0 评论 -
用js实现自动和手动轮播
记得去年第一次写轮播时候,好像是写的这个小米官网首页的轮播图,当时跟着视频教程,一点一点的研究学习,劲儿头十足。今天突然想写博客,一是记录些什么,二是希望能帮到大一的学弟学妹。 先来看看效果图: html代码很简单:<div class="one"> <!-- 创建一个ul,用于放置图片 --> <ul id="imagelist">...原创 2019-12-08 09:03:33 · 469 阅读 · 0 评论 -
事件委托
最近准备刷Zepto视频时,听到提到了事件委托,就去查了一下,对事件委托有了些了解,特总结一下。什么是事件委托 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。为什么要用事件委托在数量少的情况下,我们为同一个标签(比如 li )添加事件时常使用for循环,但是数量多的时候可能会影响浪费内存,甚至对页面性能产生影响。我们在绑定事件时(比如点击事件),只能绑定...原创 2019-10-04 21:33:33 · 182 阅读 · 0 评论 -
初识Zepto
小组安排的成员轮流讲课,昨天刚好是我,讲了Zepto的一些知识,在这里总结一下吧。因为是刚尚硅谷视频粗略学的,照搬的他的讲解,很多地方可能还不太懂,欢迎大佬指正啊。嘿嘿。什么是Zepto Zepto是轻量级的JavaScript库,是专门为移动端定制的框架。它与jQuery有着相似的API,俗称:会jQuery就会Zepto。Zepto的特点针对移动端,是目前API完善的框架中体积...原创 2019-10-04 08:10:20 · 438 阅读 · 0 评论 -
jQuery实现二级菜单和箭头旋转
一直想写技术性博客,一直都没下手。二级菜单的箭头一直懒得改,最后想了想还是改了。刚好有时间和精力,现分享给和我一样的小白,也期待大佬赐教。 首先,我们先完成二级菜单。二级菜单用jQuery很容易便可以实现。 先来看看jQuery代码,其中注释是我刚刚添上去的,希望能帮助大家理解:$(document).ready(function(){ // 二级导航的展开与收缩 ...原创 2019-08-15 18:49:09 · 1095 阅读 · 4 评论 -
用js实现简易轮播图
之前一直觉得自己技术菜学的东西基础没必要写技术性博客,但我发现我错了。博客是用来记录最近所学和遇到的坑又是怎么样填的坑的一种总结,当然也有可能有很多小白和我一样,为一些在别人看来很基础的东西而烦恼,曾n次被学长说应该多写写技术性博客,就从现在开始吧,多写多记多敲。这次记录一下前段时间写的一个简易轮播图。 很多小白可能和我一样曾经为轮播图为苦恼,然而一路走来,见...原创 2019-07-17 08:12:00 · 1482 阅读 · 4 评论 -
本地项目同步github----操作步骤
鉴于需要查找时老是需要麻烦的翻看学长的博客,现自己做个总结。1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库git init2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点“.”,意为添加文件夹下的所有文件git add . 3.用命令 git commi...原创 2019-05-02 09:00:20 · 386 阅读 · 2 评论 -
如何用js实现瀑布流
今天跟着视频一步一步敲,终于如愿制作出了瀑布流,在此做个总结,方便以后进一步加深对代码的理解和学习。html代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>瀑布流--js实现</title> <link...原创 2019-04-18 21:58:23 · 367 阅读 · 2 评论