前端
码小余の博客
越努力,越幸运!
个人博客:https://extheor.github.io/ 技术/自考
方向:Web前端
展开
-
【码上学前端】TS 两数之和
本文介绍了一种使用哈希表解决两数之和问题的算法,该算法的时间复杂度为 O(n),空间复杂度为 O(n)。同时,本文还详细解释了哈希表的原理和使用方法,以及该算法的优缺点和实现细节。在实际应用中,哈希表是一种非常常用的数据结构,具有快速查找和插入的特点,可以用于解决多种问题。原创 2023-04-01 15:24:50 · 696 阅读 · 1 评论 -
js 进制转换
代码是写的是10进制转任何进制的。懂得自然懂,不必解释什么意思。原创 2022-11-29 23:10:07 · 342 阅读 · 0 评论 -
vscode 扩展异常终止怎么办?
打开帮助里面的开发人员工具,看看控制台里面报的什么错,一个个去禁用或卸载对应的扩展即可修复vscode扩展终止问题原创 2022-08-01 21:58:58 · 773 阅读 · 0 评论 -
JS 使用swiper完成tab滑动换页功能
纯JS开发的tab滑动换页功能左右滑动换页点击换页底部activeBar跟随滑动底部activeBar长度跟随变化其他需要的功能可以在此基础上自己开发原创 2022-07-25 18:28:18 · 1047 阅读 · 2 评论 -
CSS 跑马灯
scroll-content 作为父级容器设置了相对定位(relative)scroll-text 作为子级容器设置了绝对定位(absolute)此时 scroll-text 的百分比长度设置就以 scroll-content 的长度为标准了设置文字一行显示设置 padding-left: 100% 将文字移到最右侧,此时刚好达到 scroll-content 的右边界设置动画,从左到右,transform: translate3d(-100%, 0, 0);...原创 2022-07-25 17:50:43 · 1249 阅读 · 0 评论 -
JS 自动生成闭包函数
看了都会的 JS 自动生成闭包函数原创 2022-07-13 17:05:26 · 189 阅读 · 1 评论 -
JS 两树交集
求两个树形结构的交集思路是遍历递归第一棵树,在遍历内部再次遍历递归第二棵树,添加层级,用层级和id进行比较,如果相等就添加不用删除的标记然后在下面在遍历递归tree2,删除没有exist的节点,完成emm,不会写,就写成这样了,有大佬会写的帮忙看看有没有其他的写法~...原创 2022-07-12 13:24:33 · 498 阅读 · 1 评论 -
Elementui 自定义loading
/* 隐藏原loading *//deep/ .el-loading-spinner .circular { display: none;}/* 画出新的loading *//deep/ .el-loading-spinner { background: url(../assets/Ripple-1s-200px.svg) no-repeat; background-size: 48px 48px; height: 100%; left: 50%;}...原创 2021-11-24 14:23:35 · 1225 阅读 · 0 评论 -
vite 引入cdn链接
https://blog.craftyun.cn/post/228.html转载 2021-11-23 17:37:56 · 4128 阅读 · 0 评论 -
Elementui动态换肤
Elementui 动态换肤ThemePicker.vue<template> <el-tooltip effect="dark" content="theme" placement="bottom"> <el-color-picker v-model="theme" class="theme-picker" size="small" popper-class="theme-picker-dropdown" /> </el-tooltip>原创 2021-11-17 18:43:08 · 266 阅读 · 0 评论 -
Echarts双纵轴分隔线合并解决方案
Echarts 双纵轴分隔线合并解决方案首先需要在 Echarts 中配置选项yAxis: [ { type: 'value', name: '当日营收', axisLabel: { formatter: '{value} 元' }, max: null, // 最大订单数(null/undefined 来表示“自动计算最大值”) splitNumber: 6, // 刻度原创 2021-11-17 18:42:21 · 683 阅读 · 0 评论 -
【JS】教你如何在对象内任意位置插入任意属性
【JS】教你如何在对象内任意位置插入任意属性如果你不知道我写这篇文章的目的是什么,那不妨想想这样一个场景var obj = { a: "A", c: "C", d: "D"}我想在 a 属性后面添加属性 b ,使其成为以下对象格式var obj = { a: "A", b: "B", c: "C", d: "D"}你会怎么做,将对象转成字符串然后截串操作?不不不,这样太麻烦了,而且非常不灵活(你如果是大佬可以这么干哦~)在 JS原创 2021-09-30 16:29:17 · 2645 阅读 · 0 评论 -
【JS】call,apply,bind
【JS】call,apply,bindconst steven = { name: "Steven", phoneBattery: 70, charge: function (level) { this.phoneBattery = level }}const becky = { name: "Becky", phoneBattery: 30,}steven.charge(100)console.log(steven);// steve原创 2021-09-26 20:29:16 · 101 阅读 · 0 评论 -
JS 数组和 Java 数组的区别
JS 数组和 Java 数组的区别前言这里的区别呢主要是介绍在函数(方法)中传递一个数组参数时,在函数(方法)内部改变这个数组后,对外部数组有什么影响。直接为数组重新赋值TestIt.javaclass ChangeIt { static void doIt(int[] z) { z = null; // 直接改变 z 是改变的这个方法中的 z, 而不会改变传过来外部数组 }}class TestIt { public static void main(String[]原创 2021-08-20 16:01:32 · 263 阅读 · 4 评论 -
使用 AudioContext restart 音频
使用 AudioContext restart 音频???? 前言为什么是 restart 呢,因为我遇到的问题是点击播放后无论如何再次点击播放,它就报错(index):41 Uncaught DOMException: Failed to execute ‘start’ on ‘AudioBufferSourceNode’: cannot call start more than once.at HTMLButtonElement. ???? 问题复现我在页面上定义了两个按钮(一个播放按原创 2021-08-10 18:21:47 · 2164 阅读 · 1 评论 -
electron-packager下载太慢怎么办
electron-packager下载太慢怎么办直接运营以下命令,切换到淘宝的 electron-packager源,这只是临时的npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/原创 2021-07-30 22:49:24 · 608 阅读 · 0 评论 -
JS 前端排序 数组指定项移动到最后
JS 前端排序 数组指定项移动到最后问题来源:模仿win10文件夹中按类型排序文件夹在上,文件在下,并且点击按类型排序后,文件夹和文件会各自按首字母进行排序/** * 数组指定元素移动到最后的位置 * @param {*} arr 需要排序的数组 * @param {*} sourceIndex 需要移动的元素的索引 * @param {*} targetIndex 目标索引 */function moveArray(arr, sourceIndex, targetIndex) {原创 2021-07-20 22:23:25 · 4453 阅读 · 2 评论 -
正则匹配 表情,表情
var str = /^((\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]),((\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55])$/str.test("????,????")原创 2021-07-02 21:46:03 · 622 阅读 · 0 评论 -
让你瞬间提高工作效率的常用js函数汇总
让你瞬间提高工作效率的常用js函数汇总(持续更新)前言本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下:常用的正则校验常用的设备检测方式常用的日期时间函数跨端事件处理js移动端适配方案xss预防方式常用的js算法(防抖,截流,去重,排序,模板渲染,观察者…)代码正则// 匹配邮箱let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$// (新)匹配手机原创 2021-06-30 14:57:34 · 178 阅读 · 1 评论 -
网易云api及 asrsea 加密参数文档
网易云api及 asrsea 加密参数文档detail/weapi/v3/song/detail?csrf_token=bd0c8c8504a92cd653d53a7dd1c01ba4"{"ids":"[27890395]","level":"standard","encodeType":"aac","csrf_token":"bd0c8c8504a92cd653d53a7dd1c01ba4"}"v1/weapi/song/enhance/player/url/v1?csrf_token=bd原创 2021-06-29 18:44:34 · 630 阅读 · 1 评论 -
七个你可能不了解的CSS单位
七个你可能不了解的CSS单位我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位。随着Web继续的发展,对新的解决方案的需求也会继续增大。因此,作为网页设计师和前端开发人员,我们别无选择,只有去了解我们的工具集并且熟悉它。这意味着我们还要了解一些特殊的工具-那些不经常使用的,但是当需要它们的时候,它们恰恰是最正确的工具。今天,我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!让我们一探究竟吧原创 2021-06-19 01:28:59 · 197 阅读 · 1 评论 -
一分钟实现纯CSS全屏滚动特效
一分钟实现纯CSS全屏滚动特效端午节快乐!会用到的CSS属性background-blend-mode可以使背景颜色与背景图片一起使用!scroll-snap-type属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行这是全屏滚动的核心!快乐编码使用 html 架构了页面的基本元素<div class="container"> <section><span>你好</span>原创 2021-06-14 12:46:01 · 1343 阅读 · 1 评论 -
HTML滚动条自定义
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 10px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; /*滚动条的背景区域的圆角*/ backgr原创 2021-06-14 11:58:32 · 495 阅读 · 0 评论 -
git 上传修改文件
git 上传修改文件git initgit remote add superman https://gitee.com/li_jiazhao_1/ChangClass_examination.git 或(git remote add origin https://gitee.com/li_jiazhao_1/ChangClass_examination.git)git pull --rebase superman master(git pull --rebase origin master)git原创 2021-06-13 13:18:22 · 486 阅读 · 0 评论 -
手把手·教你用 Echarts 画 ChinaMap
手把手·教你用 ECharts 画 ChinaMaptip: 学习此教程你需要使用 Echarts 指定版本和 China.js我使用的版本是下面的ECharts4.3.0China.js题目要求地图上显示“省份”,并按照省份统计时长、用不同颜色分档显示;当鼠标移至某个景区,该省份背景图变色(表示被选中),同时显示该省份所有机器的运营时长、有效订单金额等;(说白了就差不多和疫情官网那个图效果差不多)具体实现的效果如下实现步骤根据data画出基础地图显示省份名称按运营时长原创 2021-05-26 18:58:23 · 5184 阅读 · 28 评论 -
前端基础算法面试题
第一题// 写一个函数,输入[1,2,3],返回一个数组,返回的数组中的每项是输入数组中每项的两倍,输出[2,4,6],分别用map和forEach实现function fn(arr) { return arr.map((item) => { return item * 2 })}fn([1, 2, 3])第二题// 格式转换,将{'a':'aaa' , ' b:'bbb'}转换为[{key:'a' , value: 'aaa'},{key:'b' ,原创 2021-05-24 18:28:05 · 6949 阅读 · 1 评论 -
【前端性能优化】不用 setTimeout 实现防抖
相信大家都会使用 setTimeout 来实现防抖操作,但是如果有特殊情况,不能使用 setTimeout 怎么办呢,那么就可以使用以下方法来实现/** * 防止多次点击按钮 */function throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined) { gapTime = 1500 } let _lastTime = null // 返回新的函数 return function ()原创 2021-05-17 14:05:50 · 3880 阅读 · 0 评论 -
JavaScript 常用方法封装使用
1. 删除数组中指定元素Array.prototype.remove = function(val) { let index = this.indexOf(val); if (index > -1) { this.splice(index, 1); }};使用var list = ["a", "b", "c"]list.remove("b")2. 数组去重Array.prototype.disrepeat = function () { let result =原创 2021-04-03 11:21:59 · 5469 阅读 · 18 评论 -
canvas绘制图片时宽高2倍
记录一下 canvas 绘制图像时按原屏幕宽高设置,结果绘制出来的图片却是原图2倍大小的问题<canvas id="canvas" class="bg_img" height="1334" width="750" >对不起,你的浏览器不支持Canvas</canvas>mounted() { const canvas = document.querySelector("#canvas"); let ctxt = canvas.getContext("2d.原创 2021-03-30 13:42:09 · 4519 阅读 · 0 评论 -
当博客系统遇上live2d后
想要实现这个效果其实非常难~~hhh首先需要改我们已经写好的 view 文件夹下的layout.jade 文件 – 就是引用一大堆库,这些库都存放在 public 文件夹下,供其引用doctype htmlhtml(lang='en') head meta(charset='UTF-8') meta(name='viewport', content='width=device-width') title= title blo.原创 2020-07-12 16:52:19 · 13231 阅读 · 1 评论 -
炫酷光感效果
炫酷光感效果首先写一个大盒子<div class="main"></div>然后给这个大盒子添加样式* { margin: 0; padding: 0;}html,body { height: 100%; overflow: hidden;}body { background: darkblue;}.main { width: 8px; height: 8px; position: absolute; left: 50原创 2020-08-23 21:51:45 · 4790 阅读 · 4 评论 -
为什么选择MUI框架
为什么选择MUI框架1. 极简MUI框架文件大小仅有108K,而BootStrap 则有297K;同时MUI提供了20多个控件,50多个JS API 和 100 多种样式2. 极快MUI 的JS加载速度仅17毫秒,体量小加载快,页面绘出快,预加载、转场快,窗口立即转过来,下拉刷新,区域滚动,原生实现,告别元素抖动3. 极易HBuilderX 出厂设置的时候就将MUI框架进行了内置,提供了代码块的快捷操作,边看边改,模拟器调试,真机同步联调...原创 2020-08-15 22:50:05 · 3950 阅读 · 1 评论 -
CSS水滴融合效果
水滴融合效果CSS首先设置一个容器,在容器里写三个div<div class="container"> <div class="drop"></div> <div class="drop"></div> <div class="drop"></div></div>在把这个容器居中.container { display: flex; justify-con原创 2020-08-14 16:22:46 · 6299 阅读 · 3 评论 -
按钮3D分层悬停效果
按钮3D分层悬停效果纯css3实现index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>原创 2020-07-09 14:10:29 · 3371 阅读 · 1 评论 -
BOM操作及DOM表单案例练习
BOMBOM是什么BOM的全称为Browser Object Model,被译为浏览器对象模型。BCM提供了独立于HTML页面内容,而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与浏览器窗口之间通信等功能。BOM由一系列对象构成,这些对象可以简单理解为是由各个浏览器所提供的,例如Window对象等。Window对象是什么BOM中最核心的对象就是Window对象,该对象表示运行HTML页面的浏览器窗口。在浏览器环境中,Window对象具有双重角色。该对象既是允许JavaScript逻原创 2020-05-12 22:29:07 · 1998 阅读 · 0 评论 -
CSS3实现静态和动态效果
电台案例好久不更新了,因为最近在学css3新特性(学的很烂),悲催啊。示例效果图我们看到这个大案例了先不要慌,首先先规划出一个大体结构,怎么分块就看自己平时的积累了。首先我是这样子分的:一、页面顶部导航栏固定定位在顶部二、页面中部内容部分页面中部又可以分为六大块轮播图导航栏推荐TINGTOP TING热门电台最新发声三、页面底部固定定位在底部...原创 2020-03-29 12:22:24 · 1821 阅读 · 2 评论 -
axios的基本用法
axios的基本用法后台路由app.get("/adata", (req, res) => { res.send("Hello axios!")})axios 接口axios.get("http:127.0.0.1:3000/adata").then(function(ret){ // 注意data属性是固定的用法,用于获取后台的实际数据 console.log(ret.data)})因为 axios 的基本用法和 fetch 的用法基本一致,所以这原创 2020-11-03 21:12:41 · 2481 阅读 · 0 评论 -
fetch的基本用法
fetch的基本用法fetch("/abc").then(data=>{ // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取和后台返回的数据 return data.text();}).then(ret=>{ // 注意这里得到的才是最终的数据 console.log(ret);})基本的 get 请求第一种写法后台路由app.get("/books", (req, res) => {原创 2020-11-03 21:12:16 · 6056 阅读 · 0 评论 -
京东抽奖案例
京东抽奖案例0.设计思路项目呢是模仿的王者荣耀抽奖界面的一部分。。。1.目录结构|-- app.js|-- router.js 路由接口文件|-- controllers 控制器|-- models|-- node_modules 第三方包|-- package.json 包描述文件|-- package-lock.json 第三方包版本锁定文件(npm 5 以后才有)|-- public 公共的静态资原创 2020-09-10 00:56:31 · 3725 阅读 · 0 评论 -
axios中文文档
axios中文文档安装使用 npm:$ npm install axios使用 bower:$ bower install axios使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>案例执行 GET 请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) {转载 2020-09-08 10:04:55 · 3379 阅读 · 0 评论