- 博客(46)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 MessageBox弹框替代系统自带的alert、confirm -- 高仿ElementUI MessageBox
MessageBox 的作用是替代系统自带的alertconfirm，仅适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用定制的弹窗。基本仿照ElementUI的同名组件。原生，无依赖项，自适应布局，双端通用，如有弹窗层级问题需要自行调整。
2024-08-08 21:21:24
643
原创 JS实现文字溢出隐藏效果
由于项目原因，经常需要使用到canvas来将dom生成为图片供用户保存，但canvas的css属性（例如本文实现的文字溢出隐藏效果）支持并不全面，所有有些功能只能用JS来实现了。用JS循环判断填充文本后的元素长度是否超过阈值，如超过就进行调整，缩短一些文本的长度。
2024-06-13 11:14:08
684
原创 微信分享实现只显示分享给朋友或特定按钮
微信右上角打开的菜单很多在文档中并没有详细的展示，想要挨个屏蔽不太现实，所以只能反向操作，先借助隐藏所有非基础按钮接口这个功能API来屏蔽所有的功能按钮，再借助。微信最新的分享策略会导致通过链接进入网页的只能分享出来链接而不是之前的分享卡片。微信内要是分享过多被恶意举报为诱导分享的话公众号或域名被封的概率会很大，解封也很麻烦，所以我们需要及尽量的优化分享减少不必要的跟有风险的分享项，非必要项的例如：分享到腾讯微博，分享到朋友圈；风险项的例如：分享到QQ，分享到企业微信等可能还会让域名在这二者内被封禁；
2023-04-18 16:06:55
661
原创 移动端手机网页适配iPad与折叠屏设备
当前我们所采用的移动端适配方案是直接用 将视口的宽度设置为固定的设计稿宽度，在同样的宽度下iPad与折叠屏的高度要比手机小很多，所容纳的内容也少，导致某些区域被挤出了视口之外，简单来说就是我们的页面都是瘦长(即高大于宽)的，而折叠屏等设展开后是矮胖的(即宽大于高)，二者完全相反页面放进来当然展示不全了。既然是iPad与折叠屏的宽高比跟手机差异过大导致的，那么在iPad与折叠屏上采用差异化的适配方案即可；所以我们可以通用检测宽高比，在iPad与折叠屏这种设备下不设置视口的宽度而是将页面设置为固定的值即可。
2023-04-18 16:06:42
1437
原创 Web Workers JS多线程初探--使用Blob方式创建
worker浏览器兼容性现在还不错，导致其并不流行的原因我认为是因为在worker内不能直接操作 DOM 节点，也不能使用window对象的默认方法和属性并且worker运行的脚本与内部引用脚本都遵循同源策略（以下所有示例的脚本引用都默认基于此策略），导致只能运行一些纯计算类的脚本。
2023-04-18 16:06:21
674
原创 常用的一些校验规则(手机号，身份证号等)
校验规则我们经常用到，强业务性的校验很少有通用的库可以使用，一般都是搜索之后copy一个，但搜到的方法良莠不齐，各种实现方式都有，长期累积下来代码一致性可读性会非常差。判断类的优先字符串对比的方式实现；校验类依旧是正则实现但也尽量简洁；
2023-04-18 16:06:13
1740
原创 better-scroll.js 移动端滑动兼容
移动端滑动问题常见于iOS设备，可以先尝试通过增加css(例如：-webkit-overflow-scrolling: touch;)等方式来解决不行的话再使用插件来实际滚动。
2023-04-18 16:06:12
915
原创 js实现Base64编码(无+与=符号)，缩短url链接参数
通常需要在地址栏拼接参数的话都会使用encodeURIComponent()来编码一下，兼容性很好但是当参数比较复杂的时候编码出来的字符串会很长。
2023-04-18 16:05:52
1930
原创 nodejs扫描文件夹搜索包含关键词文件，可灵活配置
搜索日志：search.log 注：只保留一次的，需要多次自行修改logFile配置即可；检测完毕后会在相同位置生成searchLog.txt保存结果；将代码放到需要检测的目录同级，在命令行运行即可；搜索结果：searchResult.txt。关键代码：search.js。
2023-04-18 16:05:51
1598
原创 videoPictureInPicture，视频画中画播放初探
从Chrome 70版本开始video元素开始支持画中画播放，简单写个demo体验一下
2023-04-12 15:01:58
1134
原创 通过IntersectionObserver实现懒加载
通常懒加载等都会通过监听scroll事件用来判断元素位置来决定是否可以开始加载。性能开销是比较大的，为了节省性能又需要各种操作去弥补，例如用节流来减少判断次数等。IntersectionObserver API可以完全省去这些操作，只需要简单的读取即可。点击查看文档。
2023-04-12 15:00:44
606
原创 canvas.toDataURL生成图片报错的解决方案
解决图片的跨域问题需要前后的配合进行，测试进行时发现服务端是支持CORS跨域的，因此在前端设置下img的CORS属性即可，如果设置后不生效的话需要考虑下是不是由于请求资源都会在CDN服务器中缓存，所以设置后会存在不生效的情况。资源服务器给图片设置cors请求头允许跨域请求，前端设置图片的crossOrigin属性为anonymous来允许跨域，并且在图片后缀添加时间戳，防止请求CDN缓存资源；这个根据不同的系统有不同的表现，例如：生成完毕但控制台有warning类型的警告，或者直接异常报error。
2023-04-12 14:59:47
2632
原创 html2canvas生成图片问题汇总
绘制图片最好是在页面加载完毕之后进行，处理好图片跨域问题参考：[使用canvas生成图片跨域问题的解决方案](http://t.csdn.cn/rBWAq)
2023-04-12 14:58:07
2126
原创 安卓键盘弹出遮挡解决 保证输入框在可视范围
思路： 利用安卓键盘弹出收起会触发resize事件来进行相关操作， 在无滚动条的单页面直接用 window.scrollTo 重置下页面位置即可，在有滚动条的页面始终保证输入框在可视区域。由于上述所说的 ‘在有滚动条的页面始终保证输入框在可视区域’ ，导致输入框位置可能会变化，给人的感觉是输入框在跳位置一样（实际 scrollIntoView 是滚动到固定的位置）安卓键盘弹出会把窗口顶起来，但收起时又不会自动滚动回来，从而导致页面错位等问题；借鉴思路即可，还需要针对项目具体需求进行改造。
2023-04-12 14:57:37
492
原创 如何记住观察者模式跟发布-订阅模式的区别
先说下如何简单粗暴的记住这二者之间的区别：观察者模式跟发布-订阅模式，记住发布-订阅模式直接的小横杠连接符即可。这个连接符就是观察者模式跟发布-订阅模式最大的不同，即是否经过中间人代理转发。但是观察者模式跟发布-订阅模式二者之间的关系其实谈不上异同，具体解析请看正文。
2023-04-12 14:53:53
267
原创 window.postMessage()接收不到信息（失效）的解决办法
最近在用postMessage做demo时候发现无论怎么都接收不到弹出页所发的消息，以为是弹出的方式有问题遂尝试改动了好几种弹出方式都不生效，最后查阅了MDN后发现标准的用法应当是
2022-10-26 10:34:47
6850
原创 通过分辨率区分iPhone型号（更新至13系列）
原理通过获取设备逻辑像素宽高(window.screen.width，window.screen.height)与DPR(window.devicePixelRatio)这三要素然后依据如下图进行判断（数据已查阅多方资料核对）。核心代码 function iPhoneModel() { var isIphone = /iphone/gi.test(navigator.userAgent); if (isIphone) {
2021-11-03 12:02:57
1189
原创 预约用里程碑式进度条与人数渐增效果
预约类型的活动常见的一个效果，若是里程碑点按进度条比例分割的话实现起来就很简单，只需要放在相应的百分比点位然后控制进度条长度即可，但要是里程碑值不是等比的还要均分进度条的实现起来就很麻烦了。
2021-10-15 10:53:23
222
原创 移动端兼容问题汇总
iPhone 6等老旧iOS设备不支持es6语法百度浏览器手机端开启广告过滤后（默认开启）不支持js中通过ajax请求方式请求另一个js文件， 例如 getTeamList: function () { $.ajax({ type: 'GET', url: './top32.js', async: false, dataType: 'json', succes.
2021-08-12 12:03:53
305
原创 图片或页面置灰（兼容IE10,11）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
2021-08-12 11:56:47
1888
原创 移动端横竖屏提示
/* 横竖提示处理 * isVertical：不传默认为false，即显示竖屏提示，（false: 提示用户横屏， true：提示用户竖屏） */ (function landscape(isVertical, config) { var showWay = isVertical ? "@media screen and (min-aspect-ratio: 12/7){#orientLayer{display:block;} }"..
2021-08-02 18:06:43
947
原创 移动端页面px布局适配方案（viewport）
通过 <meta name="viewport"> 给视口设置固定的宽度，浏览器对页面自动缩放来实现页面的适配效果优点是可以使用px布局，不用额外进行rem或者vw等等单位的换算了...
2021-08-02 18:01:37
167973
原创 nodejs读取excel并解析之后生成表
使用的库为：node-xlsx文档地址：https://www.npmjs.com/package/node-xlsxexcel文件内有几页sheet就会对应生成几页，可以用底部的示例数据试一下/** * @author 贾迎博 * @description * 快速导出压缩包 需要安装依赖 npm install node-xlsx --save * 这个库的文档地址 https://www.npmjs.com/package/node-xlsx * * @example 将需要.
2021-07-23 19:32:05
1090
原创 移动端分页上滑加载瀑布流简易方案
上滑加载是移动端瀑布流的常用加载方式，实现方式还是非常简单的，没必要借助插件。一般都需要配合图片懒加载等优化方式一同使用，这里附上：，不用监听scroll事件就可以实现懒加载，很好的优化页面性能。
2021-07-21 17:13:30
895
3
原创 QQ分享文案设置
经测试有效代码如下<script src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script><script> setShareInfo({ title: '父爱，在你看不到的地方', // 分享标题 summary: '父爱如山，感觉不到只因身在此山中', // 分享内容 pic: 'http://qzonestyle.gtimg.cn/aoi/s
2021-07-16 15:16:40
539
原创 移动端H5网页调试之eruda
类似vconsole但更强的移动端调试面板；中文文档：https://github.com/liriliri/eruda/blob/master/doc/README_CN.md使用方式:cdn:<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script><script>eruda.init();</script>......
2021-07-14 10:10:28
462
原创 移动端H5网页调试之vConsole
由于百度不太好搜索到vConsole的官方地址这里贴一下方便大家查阅。vConsole官方仓库简介地址：https://github.com/Tencent/vConsole/blob/HEAD/README_CN.mdvConsole官方中文文档地址：https://github.com/Tencent/vConsole/blob/89dfbae9df3e4d0d4920a38315634c28dbd92e54/doc/tutorial_CN.mddemo地址：http://wechatfe..
2021-06-03 14:52:40
721
原创 前端简易服务器之免费pages篇（可供项目预览手机访问电脑网页等）
几种方案本质其实都是启动一个简易服务器然后手机访问来实现的，一般来说使用webpackia脚手架搭建的项目都会自动启动一个服务所以并不需要使用这些方案再重复启动了，直接在config配置下host即可；相关链接：手机访问电脑网页的三种简单方法之vscode篇手机访问电脑网页的三种简单方法之杂项篇如果你购买了云端服务器的话就可以直接将代码部署到服务器端了，再使用分配的域名或者ip或者绑定自己购买的域名都可以访问，具体可以百度解决。此篇主要说下可以免费使用的远程方案，但也仅适用于简单网页；使用g.
2021-06-02 15:25:39
515
原创 前端简易服务器之杂项篇（可供项目预览手机访问电脑网页等）
几种方案本质其实都是启动一个简易服务器然后手机访问来实现的，一般来说使用webpackia脚手架搭建的项目都会自动启动一个服务所以并不需要使用这些方案再重复启动了，直接在config配置下host即可；相关链接：手机访问电脑网页的三种简单方法之vscode篇由于篇幅所限，此篇只简单介绍下几种环境的主力服务器，具体配置还请自行百度，有空的话我会再整理，有疑问的话欢迎留言，我会及时回复前后端分离的本地服务器方案nginx现在主流的服务器端的代理解决方案，优点很多，在本地使用最大优点是可以同时代理.
2021-06-02 14:45:07
154
原创 前端简易服务器之vscode篇（可供项目预览手机访问电脑网页等）
几种方案本质其实都是启动一个简易服务器然后手机访问来实现的，一般来说使用webpackia脚手架搭建的项目都会自动启动一个服务所以并不需要使用这些方案再重复启动了，直接在config配置下host即可方案一使用vscode插件Live Server来实现，安装插件启用后会直接启动一个服务只需要保持手机跟电脑在同一个网络环境下即可访问。具体步骤如下：打开vscode在扩展中搜索 Live Server 插件选择安装配置下插件的启动所使用的ip，在设置中搜索live在左侧菜单选择扩展>.
2021-06-02 12:08:12
2877
原创 使用Chrome的WebADB工具来调试手机
关于ADB可能移动端开发的同学会比较了解，通常都需要进行繁琐的环境配置如果需要在其他人的设备调试就比较麻烦了，chrome推出的WebADB可以不用安装任何依赖，直接连接手机
2020-12-22 14:53:15
10004
原创 安卓键盘弹出遮挡解决 保证输入框在可视范围 (未完成测试)
安卓键盘弹出会把窗口顶起来，但收起时又不会自动滚动回来，从而导致页面错位等问题借鉴思路即可，还需要针对项目具体需求进行改造。思路： 利用安卓键盘弹出收起会触发resize事件来进行相关操作， 在无滚动条的单页面直接用 window.scrollTo 重置下页面位置即可，在有滚动条的页面始终保证输入框在可视区域已知缺陷：1. 由于上述所说的 ‘在有滚动条的页面始终保证输入框在可视区域’ ，导致输入框位置可能会变化，给人的感觉是输入框在跳位置一样（实际 scrollIntoView 是滚动到.
2020-12-18 15:25:30
427
原创 如何复制全局安装的npm包到另一台设备
无网开发时总是需要手动将一些脚手架等从一台有网设备下载好后复制到无网设备，局部安装的依赖直接复制node_modules目录即可但全局安装的就需要按本文操作了1. 获取全局npm包安装路径可通过命令npm config get prefix查看 npm 安装路径（npm config set prefix 可设置 npm 安装路径）；例如： 2. 准备复制在两台设备上执行上述命令获取npm安装路径后，分别打开响应路径，准备复制工作。将输出的路径复制到资源关联器即可直接打开响应路径，例：3..
2020-12-11 12:14:09
5756
原创 nodejs自动导出文件夹并生成压缩包
因为项目在内网svn上需要权限才能访问，因此每次跟第三方同步个别项目代码都很痛苦，试过git等方式，也不太理想第三方不一定熟悉操作还需要指导费时费力，因此使用nodejs封装一个插件，来自动导出项目压缩包，第一次使用需要修改下target里的目录地址，后续每次只需在命令行执行即可直接在桌面生成压缩包。
2020-11-09 11:30:04
2927
1
原创 html2canvas生成图片问题汇总
版本：html2canvas1.0.0-rc.4官网文档地址 <https://html2canvas.hertzen.com>参考项目地址：http://join-activity.changyou.com/tlhj/comments/20200912/m/share.shtml?shareid=1c1bebddbdc148438879c7c52a90b16c绘制图片最好是在页面加载完毕之后进行，处理好图片跨域问题参考：使用canvas生成图片跨域问题的解决方案若...
2020-09-24 15:48:12
2671
dialog.js 前端JavaScript，简易的弹窗插件
2022-07-20
html2cavas 1.0.0-rc.4
2020-09-24
myDialog.min.js
2020-04-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人