- 博客(57)
- 收藏
- 关注
RSS订阅原创 vue3 实现全屏 loading 加载动画
Loading.vue<template> <div class="loading-wrap"> <div v-if="mask" class="mask"></div> <div class="loading" v-cloak> <div class="load-cont"> <div class="line"></div> <div c.
2022-05-30 09:41:20
1812
1
原创 vue3 封装 Dialog 弹窗组件，支持返回promise
vue3 封装 Dialog 弹窗组件，支持返回promiseDialog .vue<template> <div class="loading-wrap"> <div v-if="mask" class="mask"></div> <div class="loading" v-cloak> <div class="load-cont"> <div class="line"&g
2022-05-30 09:32:49
1199
原创 微信小程序 textarea 组件中 手机软键盘挡住内容的处理方案
微信小程序 textarea 组件中 手机软键盘挡住内容的处理方案查看开发文档设置并增大 cursor-spacing的值，可以完美处理textarea内容被键盘遮挡问题
2022-03-22 08:29:07
1432
原创 随机字符串码_永不重复(时间戳_随机数_随机码)
根据时间戳生成随机永不重复的随机字符串编码生成规则： 时间戳 + 随机数 + 随机码export const getRandomCode = () => { var length = 10; var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
2022-02-22 09:30:04
986
原创 url(网络图片)转base64图片编码
将网络图片转换为base64编码的图片做自定义处理export function getBas64(url, outputFormat = 'image/jpg') { return new Promise((resolve) => { let canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image, dataURL = null
2022-02-22 09:25:56
836
原创 (px转rem)正则表达式匹配 px 像素单位转换为 rem
将字符串中的px单位转换为rem单位做移动端适配/** * @description: 正则表达式匹配 px 像素单位转换为 rem * @params ： str 字符串,width 基数 */export const pxToRem = (str, width = 37.5) => { var reg = /(:")+(\d+(\.\d*)?)+(px")/gi; //可以匹配浮点数 let newStr = str.replace(reg, function (_x) {
2022-02-22 09:24:07
792
原创 获取url中的参数
通过正则表达式匹配url中的参数/** * 获取url中的参数 * @param {key} 待匹配的关键字 * @param {url} 被匹配查询的url */export const getUrlQuery = ({ key, url }) => { let str = url || location.href//默认获取浏览器地址栏中的url let reg = decodeURIComponent((new RegExp('[?|&|/]' + key +
2022-02-22 09:22:18
452
原创 利用cookie记录状态(今日/N天内不提醒,免登录)
状态设置成功后将状态值存入cookie中，设置过期时间(有需要时可重新赋值更新过期时间) //5天后过期 setCookieFiveDays: function (name, value, days = 5) { let expiresTime = new Date(); expiresTime.setTime(expiresTime.getTime() + 1000 * 60 * 60 * 24 * days); document.cookie = name + '=' .
2022-02-22 09:15:59
244
原创 移动端H5及微信公众号实现人脸识别的可行性demo
实现思路1.利用手机的前置摄像头获取视频流2.利用第三方插件tracking.js捕获人脸部分3.捕获到人脸后利用canvas绘制带人脸的照片（业务需要：转为base64编码）4.将绘制带人脸的照片和其他数据上传到第三方校验平台进行识别对比校验5.结束完工 (getUserMedia要在https的安全域名下使用)html<!DOCTYPE html><html lang=en style="font-size: 37.5px"><head> &l
2021-08-13 13:22:34
3723
原创 仿ios菜单导航栏
模仿ios 菜单导航栏，点击菜单跳转函数 /** * @Description: 浮动菜单 * @params: menus: Array 菜单列表 [ {name: '', href: "", icon: "" }] * @return: { } * <div class="float-ball-box"> <div class="float-ball-box-layer">
2021-06-25 17:12:26
720
原创 加载动画函数(loadingToast)
自己封装的一个 loading 弹窗，以函数的形式展现函数/** * @Description: 加载动画 * @params: text: String 文本 * @params: duration：Number 延迟时间(s) 默认1500 * @params: canClick：Boolean 是否可点击页面 默认 true * @return: { close() } * <div class="loading-box">
2021-06-25 16:58:54
362
原创 html2canvas （踩坑） 网络图片显示不出来&生成图片只有一半或者空白&文字显示不出来问题处理
这里只提供解决思路，代码就不粘贴出来了图片显示不出来就像大多数人说的一样，HTML中的图片产生了跨域，可以将网络图片转为base64后修改img 的src属性值，添加图片允许跨域的属性。调用html2canvas的API时，将跨域参数设置为true，允许跨域。图片生成显示不全，只有半截或者空白在有滚动的页面，产生了滚动条后，生成的图片可能会只有一半或者空白。答案只有一个，那就是要把html2canvas的配置项参数中，scrollx，scrolly都设置为0，问题就解决了。 oﾟ*｡o恭
2020-12-12 21:39:06
19925
9
原创 H5常见问题及解决方法（二）
iOS 滑动不流畅iOS 上拉边界下拉出现白色空白页面放大或缩小不确定性行为click 点击穿透与延迟软键盘弹出将页面顶起来、收起未回落问题iPhone X 底部栏适配问题保存页面为图片和二维码问题和解决方案微信公众号 H5 分享问题H5 调用 SDK 相关问题及解决方案H5 调试相关方案与策略六：iPhone X系列安全区域适配问题现象：头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。原因：iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏.
2020-07-14 08:34:27
572
原创 H5常见问题及解决方法（一）
iOS 滑动不流畅iOS 上拉边界下拉出现白色空白页面放大或缩小不确定性行为click 点击穿透与延迟软键盘弹出将页面顶起来、收起未回落问题iPhone X 底部栏适配问题保存页面为图片和二维码问题和解决方案微信公众号 H5 分享问题H5 调用 SDK 相关问题及解决方案H5 调试相关方案与策略 一. iOS 滑动不流畅表现： 上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。1.在滚动容器上增加滚动 touch 方法方案：将-we.
2020-07-14 08:26:52
1174
原创 使用弹性布局 flex实现顶部固定，内容滚动
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-07-07 13:39:47
3382
原创 移动端 h5页面 长安保存图片到手机
本文使用使用 html2canvas.min.js 插件业务需要，这里我先将图片转译为base64,然后项html 片段替换为 绘制的 img图片// An highlighted block//手指长按事件 var timeOutEvent; document.querySelector("#share-qr-content").addEventListener("touchstart", function (e) { //开启定时器前先清除定时器，防止
2020-07-07 13:25:21
4252
原创 bootstrp_组件
3.组件 网页中有一些复杂的特殊效果，之前必须使用 js，dom，jq boot为我们封装好了很多常见的组件，我门可以之间使用 方便快捷，但是如果需要个性化处理，比较繁琐 boot中，大量使用元素的自定义属性来调用方法 1.下拉菜单 基本结构 <div class="dropdown"> <button ...
2019-05-29 19:38:35
569
原创 bootstrap_响应式_CSS
一.响应式布局1.什么是响应式布局 Responsive web page 响应式/自适应网页 可以根据浏览设备不同（pc，pad，phone） 而自动改变布局，图片文字效果，不会影响用户浏览体验 2.响应式网页必须做下面几件事 ①布局，不能固定元素宽度，必须是流式布局（默认文档流+浮动） ②文字和图片大小随容器的大小改变 ③媒体查询技术...
2019-05-29 19:38:19
1008
原创 CSS_CORE
一：复杂选择器1.兄弟选择器 兄弟元素：具有相同父级元素的平级元素 兄弟选择器，只能找弟弟，不能找哥哥 ① 相邻兄弟选择器 选择器1+选择器2{ } 获取紧紧挨在某元素后面的兄弟元素 ②通用兄弟选择器 选择器1~选择器2{ } 获取某元素后所有符合要求的兄弟元素 2.属性选择器 ...
2019-05-29 19:38:03
357
原创 CSS_BASIC_2
八：文本格式化（重点********）1.字体属性① 指定字号大小 fon-size; 取值：px/pt/rem/em ② 字体的类型 font-family："mn boli",华文彩云,黑体； 在当前设备的字体库查找字体，如果有就使用，没有就查找下一个，如果字体中间有空格，必须加双引号 ③ 粗体 fon...
2019-05-29 19:37:42
230
原创 CSS_BASIC_1
一：CSS概述1.什么是css Cascading style sheets 层叠样式表，级联样式表，简称样式表2.作用 设置html网页中元素的样式，美化页面3.HTML与CSS的关系 HTML：负责搭建网页，展示内容 CSS：负责美化页面，样式构建4.HTML与CSS的属性，使用原则 W3C规定我们尽量使用css的方式来取代HTML属性...
2019-05-29 19:37:15
207
原创 HTML
二：web基础知识HTML 泛指前端网页技术 2014年9月，html4.0升级html5简称h5 html5 大前端技术1.web与internet internet:全球性计算机互联网 俗称：互联网，因特网，交换网，交际网 www服务：world wide web 万维网，访问网站的服务 web就是运行在in...
2019-05-29 19:36:59
274
原创 HTTP_DOM_Ajax_JSON_XML
一：HTTP协议1. URL 结构：协议+主机名称+目录结构+文件名称 URL完整结构： <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag> ...
2019-05-29 19:35:34
233
原创 nodejs模块_4_express/mysql
4. express 框架 express是基于nodejs的快速、开发、极简的web开发框架 （www.express.com.cn） 安装 npm install express const express=require('express'); //引入express框架 var server=express(); ...
2019-04-25 20:11:52
503
原创 nodejs模块_3_http
3.7 http模块1. http协议 http协议：是浏览器与web服务器之间的通信协议（1）通用头信息（General） Request URL：请求的URL，对应浏览器地址栏内容，要向服务器获取哪些内容 Request Method：请求的方法，GET/POST/PUT....获取内容的方式 Statu...
2019-04-24 19:49:37
251
原创 nodejs模块_2_fs
3.6 fs模块——文件系统模块 用于文件的操作，目录的创建、删除、读取、；文件的创建、读取、写入、删除....(1)查看文件状态 fs.stat(path,callback) path: 要查看的文件的路径...
2019-04-23 20:00:42
232
原创 nodejs模块_1_自定义/分类/全局函数/querystring/URL
3.模块 模块就是一个封装好的功能体 在nodejs下，模块分为自定义模块、核心模块（官方提供）、第三方模块3.1 自定义模块 在nodejs下，任意一个js文件都是一个模块，文件中的代码默认被一个构造函数所包含 (function(exprots,require,module,__filename,__dirname){ ...
2019-04-23 19:56:22
760
原创 Nodejs1_概述/全局对象/模块
1.nodeje概述 nodejs基于谷歌V8引擎，运行在服务器端的语言，基于JS 对比JS和nodejs （1）JS运行字客户端浏览器，存在多个浏览器，容易产生兼容性的问题；nodejs在服务器端只有一个环境，不存在兼容性问题 （2）两者都有内置对象、自定义对象、宿主对象（根据执行环境的不同划分） （3）JS用于网页中的交互效果，nodejs node...
2019-04-19 18:18:43
629
原创 JS基础6_Date对象/Number对象/Boolean对象/错误处理
7.Date对象（1）.Date对象：用于对日期时间进行存储和计算 new Date('2019/4/19 10:20:30'); //2019-04-19T02:20:30.000Z new Date(2019,4,19,10,10,58); //第二个参数范围0-11月份0-11月 //2019-05-19T02:10:58.000Z ...
2019-04-18 19:11:16
328
原创 js 实现 练习：创建Date对象，创建员工的入职时间‘2019/4/18’，三年后合同到期，到期后时间是多少？合同到期前一个月要续签合同，如果是周末，提前到周五，计算续签时间。
练习：创建Date对象，创建员工的入职时间‘2019/4/18’，三年后合同到期，到期后时间是多少？合同到期前一个月要续签合同，如果是周末，提前到周五，计算续签时间。 入职时间：2018/4/18 到期时间：2022/4/18 续签时间：var inTime=new Date('2019/04/20');var outTime=new Date(inTime);console.log('...
2019-04-18 16:14:02
978
原创 js 实现 将一句英文的首字母转大写，其它转小写
//将一句英文的首字母转大写，其它转小写var word='Welcome to my little WORLd. I have a DREAM thAt iS TO fLy to tLe sky';//字符串拆分为数组var a=word.split(' ');for(var i=0;i<a.length;i++){ //首字母大写 //var str1=a[i]...
2019-04-18 10:00:01
3702
原创 js 实现，随机取4个元素创建数组，包含所有额英文字母（大写、小写）和数字，（如何不重复）
解析：//创建数组，包含所有额英文字母（大写、小写）和数字，随机取4个元素（循环4次），放到新数组push，如何不重复如何不重复：在原数组中删除取到的元素 splicevararr=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z...
2019-04-18 09:42:13
2140
原创 JS基础5_字符串操作/Math对象
5.字符串操作 包装对象：目的是让原始类型数据向引用类型数据类型一样，具有属性和方法 JS中提供了三种包装对象：String、Number、Boolean 将任意类型转为字符串： new String(数据) 强制转为字符串，返回 对象，使用和字符没有区别 Stri...
2019-04-18 09:34:54
320
原创 js_实现去掉数组中的重复元素
//如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的，忽略掉。否则存入结果数组var arr=[1,1,2,3];var arr1=[arr[0]]; for(var i=1;i<arr.length;i++){ //判断当前数组的第i项在当前数组中第一次出现的位置不是i， if(arr.indexOf(arr...
2019-04-18 09:34:43
554
原创 js 实现 创建函数，计算斐波那契数列的第n项，使用递归和普通函数两种方式
方法一：function fn(n){ if(n==1 || n==2){ return 1; }else { return fn(n-1)+fn(n-2); }}var res=fn(50);console.log(res);方法二：function fn2(n){ var a=1,b=1,c=0; for(...
2019-04-18 09:34:35
4250
原创 js 实现使用递归来计算1~任意数字之间的和
function getSum(n){ //当n为1的时候。返回1 if(n==1){ return 1; } return n+getSum(n-1);}var res=getSum(100);console.log(res);
2019-04-17 13:31:11
2669
原创 js 实现 计算1~任意数字之间的所有整数阶乘的和
//1.创建函数getJc，传递一个参数计算任意数字的阶乘function getJc(n){ for(var i=1,ride=1;i<=n;i++){ ride*=i; } return ride;}//2.计算1~任何数字之间整数的和function getSum(n){ for(var i=1,sum=0;i<=n;i++...
2019-04-17 13:29:58
3400
原创 js 打印99乘法表
1.打印倒着的九九乘法表for(var i=9;i>=1;i--){ for(var j=1,str='';j<=i;j++){ str+=i+'*'+j+'='+i*j+' '; } console.log(str);}2.打印正的九九乘法表for(var i=1;i<=9;i++){ for(var j=1,...
2019-04-17 13:28:13
1651
原创 js 实现题目：求 1+2!+3!+...+20! 的和
for(var i=1,sum=0;i<=20;i++){ for(var j=1,ride=1;j<=i;j++){ ride*=j; } //console.log(ride); sum+=ride;}console.log(sum);
2019-04-17 13:24:11
5830
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人