- 博客(32)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 验证码输入组件实现思路
首先看dom结构, label的for属性指向了input,此时点击label和点击input是同样的聚焦效果, label内放置了div, 也就是方框, 当聚焦时给所有方框添加一个。label元素的特性为for绑定的表单元素,或者它内部的表单元素, 点击label元素的区域会自动聚焦或者选中, 利用这一特性我们可以实现很多效果, 比如美化表单元素等等。,那么此时应该是第四个元素要进行输入, 第四个元素的下标为3, input的value的长度为3。如果input的value为。
2023-06-15 16:44:56
354
原创 一维数据格式化为树形数据---js
突然琢磨出来个很简单的算法, 希望对大家有思路上的帮助let baseArr = [ {id: 1, pid: 0}, {id: 2, pid: 1}, {id: 3, pid: 2}, {id: 4, pid: 2}, {id: 5, pid: 1}, {id: 6, pid: 1}, {id: 7, pid: 5}, {id: 8, pid: 0},]/** * 利用引用对象都是址的特性进行树形数据格式化 * @param data 数据 * @param
2022-03-25 16:51:39
376
原创 Vite css 热重载失效
记录一次 Vite CSS热重载失效踩坑经历结论文章较长,给赶时间的同学先说结论排查自己代码和所用包代码中的document.head.innerHTML+=""代码背景本人在使用vite+vue3+pug+tailwindcss开发一个博客前端页面, 直到佛系的我时隔大概一个月再次打开这个项目准备继续写的时候忽然发现好像vite的css热重载失效了(html,js的热重载是对的)分析过程vite采用HMR的方式进行热重载, 具体表现为使用WebSocket进行接受变更文件中的css代码更新
2021-12-17 12:07:39
1876
原创 qiankun中使用不同版本的vue-router导致冲突(主应用vue3子应用vue2路由跳转出错)
qiankun主应用vue3 子应用vue2 子应用切换路由后主应用路由无法跳转
2021-12-14 11:17:59
5747
5
原创 js代码混淆初尝试
本文思路拿到a-Z的ASCII码定义一个key指定key的某几位获取ASCII码并且相加得出的值做最终解码值(keyNum)keyNum+对应方法名的每一位的ASCII码 , 向左偏移三位然后转换为16进制 , 获取简单加密后的对应字符串, 保存下来(cStrArr)此处可以进行很多优化, 比如a-Z的ASCII数组打乱, 给更加复杂的加密算法, 这里我只是为了做探索, 所以简化了很多, 但是有一点需要注意 这个加密过程应当是后端完成返回前端的给出fnName数组为cStrArr
2021-11-23 15:06:31
779
原创 File System Access API文档汇总(JavaScript操作本地文件)
最近很多我关注的公众号都在推送vocode网页版的消息, 今天得空, 打开看了一下, 不看不知道一看吓一跳在我的固有印象中, 在网页中进行读取是可以的, 但是在网页中直接进行写入操作除了IE外是不可能行得通的, 更别提获取文件目录等等操作了vscode居然可以直接读取目录(当然需要授权)并且读出目录下的文件内容, 甚至还可以进行修改(也需要授权)这引起我极大的好奇心, 在MDN上一番查阅找到了一篇只有英文一种翻译的文档: 文档地址, 上百度和某个404网站进行搜索后发现有一篇国人写的文章:使
2021-11-19 11:44:12
1488
转载 随机图片api
转自: https://www.cnblogs.com/zaxtyson/p/11628746.htmlEEE.DOG 这个好使保罗｜API 这个有音乐解析小歪 这个有舔狗语录很好玩哈哈哈哈剩下的去看转载的原博客吧
2021-11-15 15:56:44
537
原创 video, audio无法自动播放--Chrome视频音频自动播放策略
背景前段时间出于兴趣写了一个弹幕播放器, 在写的过程中想做一个自动播放的功能, 但是遇到了Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.这个报错, 就很痛苦. 于是我开始去查为什么这样, 并且这个问题伴随了我大概有1年的时间吧, 今天突然想起来这个问题, 于是有了本博客.官方对应介绍自动播放策略的博客探索过程最开始注意到这个问题后就去
2021-09-10 11:18:05
1269
原创 form表单中回车的怪异行为
背景今天测试给我提了一个bug, 在只有一个inpu的表单中按回车会触发页面刷新,并且提交事件并没有触发, 因为这个项目刚刚接手, 代码不是我写的, 所以我第一个想到的是原来的开发给form添加了键盘事件, 或者给form添加了submit事件.解决经过排查代码后发现, form表单中并没有写特殊的事件, 并且bug呈现页面刷新状态, 所以我推断为没有阻止默认的form提交事件.给form标签中添加@keypress.enter.prevent.stop.native='()=>false'(
2021-09-06 15:54:13
223
原创 网站逆向分析-vue打包后的网站数据获取
目前来说网站开发主要有三种方向原生js或者jQueryvue，react，angular等框架WebAssemblywasm目前除了游戏引擎打包出来之外，我还没有见到其他的应用，所以暂时不讨论。原生js或者jQuery开发的网站使用原生js或者jQuery开发的网站，他们的数据挂挂载方式很简单，无非就两种：window上面的全局作用域不可在外部获取的函数作用域因为开发方式比较原始，所以这种网站的大部分都没有进行源码压缩，源码中甚至可以看到对应的注释，所以分析网站暴露出来的源码比较方
2021-08-16 14:59:43
3991
原创 safari中Date的兼容性处理
先上代码// 重写Date对象// 如果是vue或者react项目 在入口文件处写下方代码window.OldDate = window.Datevar bind = Function.bindvar unbind = bind.bind(bind)function instantiate (constructor, args) { return new (unbind(constructor, null).apply(null, args))()}window.Date = (fu
2021-07-29 15:59:44
356
2
原创 css毛玻璃效果向下穿透以及JS获取单行或者多行文本超出隐藏
css毛玻璃效果向下穿透以及JS获取单行或者多行文本超出隐藏css毛玻璃(滤镜属性)向下穿透css的滤镜属性 filter相信大家都很熟悉, 其中值为blur设置的高斯模糊, 在不少设计稿中经常出现, 但是它有一个弊病, 就是只能作用在本元素内.下面举一个具体的例子假设我们想要的是一个这样子的header.说明:header为窗口定位left:0;top:0;背景色为rgba(226, 48, 48, 0.3);内部文字为header的元素<style> header {
2021-05-25 16:28:47
436
原创 数据结构中的有序和无序
数据结构中的有序和无序文章开头首先感谢正在学C++博主个人最起始的迷惑我的迷惑来自有序列表这个名词。在我的印象中有序的数据结构是可以保留插入顺序的一种数据结构。而无序则是指在插入数据时进行了排序、去重等操作的数据结构。正是因为这个迷惑让我开始了对于有序和无序的思考。以Python的list和JavaScript的Array为例来说，以下的数据是有序还是无序# pyarr = [1,3]arr.append(2)print(arr) #[1,3,2]// JavaScriptlet
2021-05-13 11:09:01
6927
6
原创 后台配置Access-Control-Allow-Origin :*后依然被浏览器拦截
CROS跨域遇到的问题后台配置好 Access-Control-Allow-Origin :*之后 谷歌浏览器Network中还是显示 CROS ERROR, 鼠标放上去显示 Cross-Origin Resource Sharing error: PreflightWildcardOriginNotAllowed原因在CORS中，Credential不接受http响应首部中的‘Access-Control-Allow-Origin’设置为通配符‘*’解决方案CORS 请求发出时，已经设定了c
2021-01-25 13:01:06
6512
4
原创 vue-router 根据name属性判断是否拥有该路由
vue-router 根据name属性判断是否拥有该路由, 留个存根, 也分享给大家 hasRoute(name, routeList) { !routeList && (routeList = this.$router.options.routes, console.log('执行')) for (let i = 0; i < routeList.length; i++) { console.log(routeList[i])
2021-01-13 11:25:21
6440
3
原创 React权限控制
开发中经常会碰到需要做权限控制的功能, 尤其是后台系统这个时候通常会通过权限控制的方式展示该角色相应的可以查看的页面在vue中可以使用addRouter这个api进行注册,将路由挂载到vuex中,发生改变实时进行变化在react中我将vue的思维带了进来,利用redux和高阶组件进行相应的开发这里我使用antd组件库进行页面的搭建,所以会有一些antd组件的代码首先需要设计store// @/store/routerList.jsexport const CHANGE_ROUTER= "C
2020-10-27 15:57:23
2627
原创 react路由仿vue-router解析
react的路由对比起vue来说,实用度确实8太行, 因为我之前对vue比较熟悉, 所以先入为主的觉得路由就应该按照vue那样写(本人自学的react,公司也没有用到react,也没有好大哥带我,所以一切都是自己摸索的,不对之处请指出)在我学习的过程中发现react-router并没有像vue-router那样的子路由层级嵌套关系, 这不利于导航栏的渲染, 所以我觉得应该是一个类似vue-router那样的嵌套关系import React,{Component} from "react";import
2020-10-26 11:31:28
665
3
原创 react学习笔记
react构建用户界面的js库和vue的区别: 比vue更加灵活简便小巧,因为小巧所以更加复杂主要用于构建ui界面2013年开源特点:声明式的设计高效, 采用虚拟dom实现渲染,最大限度减少dom操作灵活, 跟其他的库灵活搭配使用jsx, 俗称js中写html, js的语法拓展组件化, 模块化开发, 代码复用性提高, 大型项目非常喜欢用react单项数据流, 没有实现数据双向绑定 数据- > 视图 -> 事件 ->数据创建项目通过script引入使用
2020-10-20 19:01:22
431
原创 Vue 3中创建一个挂载在this上的loading
今天翻遍全网也没有找到Vue3中一个类似Vue2中挂载在原型链上的$massage这样的文章, 然后我突然想到Ant Design of Vue组件库支持vue3.0, 这样就开始了漫长且痛苦的翻源码之路在github中找到了如下几个文件ant-design-vue/components/index.js antd组件库的入口文件ant-design-vue/components/modal/index.js 对话框组件入口文件ant-design-vue/components/modal/co
2020-10-03 22:38:30
3649
原创 vue3对比vue2的改变
vue3正式版本刚刚发布,虽然之前就看过预览文档, 但是这次是发布的正式版本值得好好总结一番vue3文档地址vue3对比vue2的改变main.js中的改变import { createApp } from 'vue'// 创建Appconst app = createApp({})// 挂载路由, 全局组件, 全局指令等操作// 按道理来说vue2的挂载组件库的操作也是在这个中间执行的app.use(VueRouter)// 将app链接到#app元素中app.mount(.
2020-09-21 20:15:35
503
原创 从0开始写一个播放器系列-控制条类实现
控制条类实现在控制条类中需要实现基本的播放器功能播放/暂停显示当前播放时间:总时长播放速度控制调整音量小窗播放网页全屏(document层级)全屏播放(window层级)进度条切换下一P选集选择清晰度这里说一下, 我在开发最初一直很纠结怎么能在开发过程中解析出来传入的是否为[{}]格式,怎么能一路平川得完成进度条开发最开始不要想那么复杂,就以默认传入的是字符串格式的url进行解析先动手,后面的事情就迎刃而解了控制条应该存入的
2020-09-12 11:45:02
701
原创 从0开始写一个播放器系列-核心类实现
核心类实现提示: 谷歌浏览器中canvas的drawImage方法有限制,不支持跨域操作,所以video文件必须是本域名下的,emmm好像有点废柴的样子核心类中主要实现的是创建弹幕, 创建标题, 创建控制条, video的渲染等核心操作所需要用到弹幕类,控制条类,标题类以及基本数据类型,工具类几个文件我在写这篇博客的时候还没有完成弹幕类和标题类的实现,所以写到弹幕类和标题类这两篇博客时会提及在核心类中加减的代码核心类中所需要实现的功能在传入的父元素中创建 video标签, 中转canva
2020-09-12 11:44:05
414
原创 从0开始写一个播放器系列-数据格式定义以及工具类
数据格式定义工欲善其事必先利其器, 定义一套数据格式有助于理顺思路, 所以开始编写代码第一步应该先定义一套数据格式回顾一下设想的调用方式 new dpVideo(parentDom,urlList,options)parentDom为外层盒子urlList 为video的srcoptions 为配置项这里的urlList格式和options需要设计数据格式首先说一下urlList的数据格式吧urlList数据格式允许用户传入字符串 , 数组两种形式的数据设想中需要拥有切换下一P, 选择清
2020-09-12 11:43:20
356
原创 从0开始写一个播放器系列-开发环境搭建
开发环境搭建开发自己的库,搭建一个开发环境是必不可少的我们需要一个编译TS,css压缩和兼容性处理的打包工具, 以及一个可以进行热编译的开发环境因为工作中使用webpack比较多一点, 也相对熟一点就选webpack了webpack搭建创建文件夹, 打开cmd命令行工具,cd到刚才创建的文件夹下执行下方命令npm init -ynpm i webpack webpack-cli webpack-dev-server -g等待执行的过程中在根目录中创建webpack.config.js写入
2020-09-11 20:46:25
358
原创 从0开始写一个播放器系列-数据格式篇
从0开始写一个播放器系列-数据格式篇设计所需要的数据格式本片文章补充一下所需要得到数据格式首先需要确定一下调用的方式因为使用typescript开发,对class的支持度比较高, 所以使用new调用new dpVideo(parentDom,urlList,options)解释一下parentDom 传入外层包裹的html元素,注意只要dom节点元素,不需要选择器(考虑到适配react和vue)urlList, 数据格式如下// 格式进行修改 :// 格式1: "http://asda
2020-09-11 20:29:59
526
原创 从0开始写一个播放器系列-开篇
从0开始写一个播放器系列-写一个videoPlayer-开篇阅读本系列博客所需要具备的知识: js, ts , canvas Api , DOM, webpack, 不懂也没有太大的关系, 我会捎带着写出来, 剩下的自行百度第一步,梳理所需要的功能以及收集实现方案首先需要确定需求既然想要做一个播放器,首先应该具有播放器基本的功能,播放/暂停下一个(如果传入的播放地址为数组)选择清晰度倍速播放音量画中画宽屏网页全屏全屏镜像上方需求很简单, 通过原生的video控制条和简单的c
2020-09-11 20:24:42
511
原创 TypeScript渲染dom函数
以后可能会用到 保存一下, 也顺便分享给有需要的人先实现的是以方法形式实现的, 心情好的话封装个类出来// 元素挂载styleexport function styleList(dom: HTMLElement, styleList: object) { for (let item in styleList) { dom.style[item] = styleList[item]; }}// 元素挂载classNameexport function classN
2020-09-06 20:04:42
1729
空空如也
数据结构中的有序和无序是如何理解的?
2021-05-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人