- 博客(87)
- 收藏
- 关注
原创 flex 实现多行项目动态堆叠,随着屏幕尺寸而扩展减少
当您增加或减少屏幕尺寸时,这些 flex 项目会缩小和增长。flex-wrap;height;padding;display;;;;.boxflex;flex;margin;height100%;center;center;
2023-09-12 16:22:51
663
转载 纯前端也可以访问文件系统
想不到吧,这种功能现在纯前端就能够实现了,当然还可以做的更复杂一点,包括修改保存等功能,保存可以使用showSaveFilePickerAPI,它可以写入文件,同样是返回一个promise。感兴趣的可以试着完善编辑器的功能。entries、keys、values这三个方法都是用来获取目录中的所有文件和目录的,它们返回的都是一个AsyncIterable对象,我们可以通过for await…了解完这些知识点,我们就可以来开发一个简陋网页版编辑器了,初期只包含打开文件、打开文件夹、查看文件、切换文件。
2023-09-11 18:24:24
375
原创 Vue3 pinia的使用
/ useStore 可以是 useUser、useCart 之类的任何东西// 第一个参数是应用程序中 store 的唯一 id'main', // 或者id: 'main',// store里的初始值count: 0}),getters: {},// Actions 相当于组件中的 methods。
2023-09-05 18:37:28
355
原创 自动化部署shell脚本,前端
由于研发项目较小,团队人员较少,所以没有部署jenkins。需要写一个自动化部署的shell脚本,实现在本地执行脚本自动完成打包,上传、备份、重启等操作。3、由于本地客户端无法安装sshpass或except来实现免密登录,你可以在客户端生成ssh公钥并把它放在服务器上,来完成免密登录。1、在项目根目录新建名为deploy.sh的脚本文件,每次修改完代码,直接在根目录打开git命令窗口,执行sh deploy.sh。
2023-02-17 15:34:01
522
1
原创 linux 定时执行shell巡检脚本,巡检jar服务是否正常,如果挂掉可以重新启动
实现定时执行shell脚本,巡检jar服务是否正常,如果挂掉可以重新启动,并存储检查日志。
2023-01-14 20:16:20
873
原创 vue-seamless-scroll数据量少时,暂停滚动,继续滚动
获取数据后并渲染到dom后,查看最后一个子元素是否在父元素的可视范围内,如果在就禁止vue-seamless-scroll复制数据和自动滚动行为,反之则允许。大屏项目:指定dom元素内,如果子元素内容过多,超出父元素的最高高度,可以发生自动滚动;如果子元素内容没有超出父元素的最高高度,不可以发生自动滚动。通过最后一个子元素offsetTop和父元素的clientHeight比较。
2023-01-10 10:01:10
3476
5
原创 js正则校验[{key:xx,val:xx}]格式
通过js正则表达式校验指定格式[{“key”:“123”,“val”:“123”},{“key”:“123”,“val”:“123”}]
2022-11-26 19:26:55
224
原创 js正则判断域名和IP的端口路径是否正确
通过正则来判断输入的ip端口路径http://127.0.0.1:3000/list是否正确const reg = new RegExp("/^http(s)?:\/\/(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[0-9])\.((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){2}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-
2022-04-21 14:52:07
2946
原创 移动端H5解决Popup滑动穿透问题(多种方法)
· 我们时常会遇到这样的需求,点击按钮,显示弹层。弹层内容超出弹层高度并可以滑动,但是滑动时会发生滑动穿透的问题,背景内容也会发生滚动。我们显然不希望发生这种问题的发生。现在就让我们看看如何解决这种问题。·1. 通过body的overflow我们可以在弹层显示的时候,控制doucment.body的overflow属性来让背景多余的内容隐藏来完成阻止背景内容滚动document.body.style.overflow = 'hidden' // 弹层显示时document.body.style
2022-03-13 20:52:45
4882
1
原创 js 数组去重;排序数组;取大小值;对象数组排序
1.sort排序sort是es6新增的方法 排序会直接改变的是原数组const arr = [1,51,25,41,5]arr.sort((a, b) => { // b-a从大到小 a-b从小到大 return b - a})sort函数也可以排序对象数组const arrobj = [ { id: 1, name: 'haha' }, { id: 20, name: 'sasa' }, { id: 15, name: 'fafa' }
2022-03-12 21:16:26
540
原创 vuex的基础入门
mutation-可以看出mutation是用来修改数据的方法,我们为什么不直接new一个State来改数据呢?而是在mutation里传入数据再commit提交来修数据呢?vuex这样做是为了跟方便的记录下数据的变更记录和轨迹,为了后面的监听和回滚之类的操作action-为了更方便的操作mutaion一些异步操作等,就是在mutation外包裹了一层方法...
2022-03-12 20:00:09
1725
原创 flex布局控制每行显示几个且有间隔
实现一个父元素包裹多个子元素,且每行只能有三个宽度不固定的子元素。父元素内部边距是32px,相邻两个B元素的间距是16px。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
2022-03-12 19:14:33
7151
原创 css3文字智能适配背景颜色
实现一段文字在不同背景下展示不同的颜色,像是下面这样:CSS3 新增了一个很有意思的属性 – mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
2022-03-09 17:10:14
334
原创 JS数据结构中的集合结构详解
不管是哪一种编程语言,都有集合。虽然 es6 中提供了 Set类,我们可以直接使用,但是这里为了让大家理解集合的内部实现机制,这里我们来手动封装一个 集合类 。什么是集合集合通常是由一组无序的, 不能重复的元素构成可以将它看成一种特殊的数组,特殊之处在于里面的元素没有顺序, 也不能重复没有顺序意味着不能通过下标值进行访问, 不能重复意味着相同的对象在集合中只会存在一份创建一个集合类主要是封装一个集合的构造函数,在集合中, 添加了一个 items 属性, 用于保存之后添加到集合中的元素. 因为
2022-03-09 13:34:33
1630
原创 微信授权登录增加浏览器历史记录解决方法
在前后端分离的开发模式中,在首次进入页面通过微信授权后会遇到返回两次才能真正达到返回的效果。但在纯应用内前后端(jsp等)重定向,是没有上述多次返回按键问题的。单页应用的解决方案在首次进入项目页面时,可以让后端判断前端过来的请求,如果cookies失效需要重新跳转授权了,那么返回一个标志告知前端需要微信跳转至授权页面。或者前端自己写判断哪个页面需要授权后才能进入。前端通过location.href跳转至该授权回调链接。授权完毕会redirect到步骤2的约定url中。目前为止location.
2022-02-25 18:06:20
1722
1
原创 手动实现Vue秒杀活动倒计时组件
预计实现效果子组件<template> <div class="_base-count-down no-rtl"> <div class="content"> <slot v-bind="{ d: days, h: hours, m: mins, s: seconds, hh: `00${hours}`.slice(-2), mm: `00${mins}`.slice(-2),
2022-02-21 17:20:47
565
原创 网页阅读进度功能实现
通过js和css实现文章顶部的阅读进度功能使用 JavaScript 实现阅读进度功能1. html和csshtml css 部分非常简单,通过嵌套的两个 div 实现,外部的 div 提供底色背景,内部 div 显示阅读进度<head><style>.read_pro { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-colo
2022-02-09 14:16:27
1190
原创 如何中断一个已发出去的请求?
最近在开发中遇见了如何中断已经发送web请求的问题,在这里跟大家探讨一下。中断axios请求axions 中断请求有两种方式:方式一使用 CancelToken.souce 工厂方法创建一个 cancel token,代码如下:import axios from 'axios'const CancelToken = axios.CancelTokenconst source = CancelToken.source()// 换成服务器资源地址是一样的 https://mdn.github
2022-01-05 17:57:29
3060
1
原创 Vue 前端代码风格指南(自用)
一、命名规范市面上常用的命名规范:camelCase(小驼峰式命名法 —— 首字母小写)PascalCase(大驼峰式命名法 —— 首字母大写)kebab-case(短横线连接式)Snake(下划线连接式)1.1 项目文件命名1.1.1 项目名全部采用小写方式, 以短横线分隔。例:my-project-name。1.1.2 目录名参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、view
2021-11-02 10:23:20
116
转载 Chrome开发者工具详解
Chrome 开发者工具可以在浏览器中按下F12来进入开发者模式Chrome 开发者工具有很多重要的面板,比如与性能相关的有网络面板、Performance 面板、内存面板等,与调试页面相关的有 Elements 面板、Sources 面板、Console 面板等。你可以在浏览器窗口的右上方选择 Chrome 菜单,然后选择“更多工具–> 开发者工具”来打开 Chrome 开发者工具。打开的页面如下图所示:Chrome 开发者工具从图中可以看出,它一共包含了 10 个功能面板,包括了 Elemen
2021-08-02 15:39:30
3761
2
原创 记录webpack3升级到webpack4的艰辛历程
项目的第三方样式库是vux,vux2必须配合vux-loader使用,webpack打包会做一些别的配置这是项目升级前的一些打包和环境配置目录,升级后目录结构没有改变。在这说明只是对我或你们的项目配置看看有哪些地方有差异1.升级webpack以及插件升级webpack到版本4的命令npm install --save-dev webpack@4 我这里更新到了4.8.1同时需要安装webpack-clinpm install --save-dev webpack-cli 我这里更新到了2.1.
2021-07-30 10:02:25
715
1
原创 浏览器工作原理详解
浏览器工作原理详解“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络、操作系统、Web 等一系列的知识。但很多人只能答出其中几个知识点,并不能将这些知识点串联成线,无法系统而又全面地回答这个问题。这篇文章会详细的讲解这些内容首先从浏览器的工作讲起,这里主要讲chrome浏览器(因为chrome浏览器市场占用率最高,具有代表性)现代浏览器都是多线程执行,由于进程是相互隔离的,所以当一个页面或者插件崩溃时,影响
2021-07-19 23:39:11
3382
1
原创 H5唤起手机照相、相册、摄影、录音及打电话发邮件
拍照<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拍照</title><script type="text/javascript"> function change(){
2021-07-19 10:53:26
836
原创 想了解TS,看这儿就明白了
1.TS数据类型let isDone: boolean = falselet age: number = 123let sname: string = '123'let message: string = '123'let u: undefined = undefinedlet n: null = nulllet num: number = undefinedlet notSure: any = 4// 任何类型随意赋值或者调用不存在方法也不会报错notSure = '123'notS
2021-06-14 18:00:51
395
原创 File、Blob、dataURL 和 canvas 的详解与应用转换
基本介绍1. File(1) 通常情况下, File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。(2) File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如:FileReader, URL.createObjectURL(), createImageBitmap(),
2021-05-14 15:20:49
329
1
原创 实现PC端的图片拖动效果
<!DOCTYPE HTML><html><head> <style> * { margin: 0; padding: 0; } #div1 { position: absolute; right: 50%; transform: translateX(-50%);
2021-03-29 16:44:36
297
原创 Js 数字每日动态增长的实现
let number = 0// 千位分隔符的动态数组let thousandsNumber = 0// 基础人数let baseNumber = 2100// 每天动态增加的人数 7个let curNumber = Math.floor((+new Date() - (4*60*60*1000)) / 1000000) + ''// 限制最大人数let maxNumber = Math.floor(Number(curNumber.substring(2, curNumber.length
2021-03-11 15:02:59
696
原创 canvas实现H5接物类小游戏
在vue中实现接物类小游戏先放张效果图<template> <div id="container"> <div id="guidePanel"></div> <div id="gamepanel"> <div class="score-wrap"> <div class="heart"></div>
2021-03-11 10:50:41
1431
1
原创 Js 将数字转换为大写金额
export const changeToChinese = (Num) => { //判断如果传递进来的不是字符的话转换为字符 if (typeof Num == "number") { Num = new String(Num); }; Num = Num.replace(/,/g, "") //替换tomoney()中的“,” Num = Num.replace(/ /g, "") //替换tomoney()中的空格 Num = N
2021-03-09 15:30:51
753
原创 Js 16进制颜色转RGB/RGBA字符串
export const colorToRGB = (val, opa) => { var pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则 var isOpa = typeof opa == 'number'; //判断是否有设置不透明度 if (!pattern.test(val)) { //如果值不符合规则返回空字符 return ''; } var v = val.replace(/#/
2021-03-09 15:27:43
640
原创 javascript执行机制(宏观和微观)
当拿到一段 JavaScript 代码时,浏览器或者 Node 环境首先要做的就是;传递给 JavaScript 引擎,并且要求它去执行。然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎,比如 setTimeout 这样的API,它会允许 JavaScript 在特定的时机执行。所以,我们首先应该形成一个感性的认知:一个 JavaScript 引擎会常.
2021-03-07 22:26:19
421
原创 详细介绍javascript有哪些语法
1. 脚本和模块js有两种源文件:脚本(语句)和 模块(语句,import声明,export声明)脚本可由浏览器或者node环境引入执行;模块只能由import引入执行从概念上:脚本是主动性JavaScript代码段,控制宿主完成一定任务的代码;模块是被动性的JavaScript代码段,是等待被调用的库;现代浏览器可用script引入模块,加上type=“module”,如果不加这个,默认引入的是脚本,如果我们在脚本中使用export,会抛错<script type="module" s
2021-03-07 15:19:58
314
转载 es6代理proxy对象介绍
什么是代理?代理类,用来进行事物不想或不能进行的其他操作,比如当你对数据库进行操作时,代理可以在你对数据库操作完后,记录下你所进行的操作。Proxy对象可以让你为另一个对象创建一个代理,它可以拦截和重新定义该对象的基本操作。基本上,它的意思是说,我们要把一个对象,用Proxy包裹起来,这将允许我们创建一个 "隐藏 "的门,并控制所有对所需对象的访问。一个Proxy的创建有两个参数。target: 你想包裹的原始对象(proxy)handler:定义哪些操作将被拦截,以及如何重新定义被拦截的操
2021-03-02 11:37:39
502
1
原创 解决微信浏览器中video视频播放器自动全屏播放
video 标签定义视频,比如电影片段或其他视频流。可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。<video src="movie.mp4">您的浏览器不支持 video 标签。</video>在标签内添加这个属性x5-playsinline=“true” 使安卓微信浏览器的video视频不在全屏播放在标签内添加这两个属性webkit-playsinline=“true” playsinline=“true” /*IOS微信浏览
2021-02-26 14:15:45
1740
原创 教你成为代码绅士,写出高效简介的代码(2)
1. 与 (&&) 短路运算如果你只有当某个变量为 true 时调用一个函数,那么你可以使用与 (&&)短路形式书写。//badif (isLoggedin) { goToHomepage();}//goodisLoggedin && goToHomepage();当你在 React 中想要有条件地渲染某个组件时,这个与 (&&)短路写法比较有用。例如:<div> { this.state.isLoading &
2021-02-18 17:58:48
181
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人