- 博客(34)
- 资源 (15)
- 收藏
- 关注
RSS订阅
原创 form表单提交后台getOriginalFilename取不到file文件名
开发遇到问题，前端new FormData();用append添加属性，上传图片file文件时，服务端（java）取不到图片的文件名，导致报错。file为blob格式，如果是file格式不会报错。js代码var param = new FormData(); // 创建form对象param.append('imagedata', file);//图片file文件java代码Stri...
2019-10-12 09:12:46
5256
原创 20个提升效率的JS简写技巧，告别屎山！
然后，在函数 foo 的参数列表中，使用赋默认值的方式来将 bar 参数设置为 mandatory() 的调用结果，如果 bar 参数未被传入或者传入了假值，就会触发 mandatory() 函数的执行。= 的写法更加简洁和易读。单一的逻辑非操作符已经可以将值转换为布尔类型并对其进行取反，所以第二个逻辑非操作符会再次对其进行取反，从而将其恢复为原始含义，并保持为布尔类型。不过，这个优化有些争议，很多人认为这么写会影响代码的可读性，因为许多变量写到了一行，不如一个变量一行更清晰明了，所以可以选择性采用。
2023-10-18 15:31:35
210
原创 8个开源的Vue/React小游戏，个个经典
该项目使用的技术栈包括：TypeScript、Webpack、React、Redux、React Router。其功能包括：15个关卡、快速下落和硬下落、方块放置预览、音效和背景音乐、简化的得分系统等。使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。本文来分享 8 个基于 Vue / React 的小游戏，包括俄罗斯方块、贪吃蛇、扫雷、国际象棋等，个个经典！
2023-10-18 14:48:57
772
原创 clipboard.js第一次点击失效，事件绑定问题。
clipboard.js第一次点击失效多数的点击不生效，都是没有处理好事件绑定。下图是https://clipboardjs.com/官网给出的高级选项。以下是翻译后的。很多人都遇到了这个问题，双层事件也没能解决本人遇到的问题，只因为第一次点击时才将复制事件绑定到元素上。再以下是本人代码，古董级的angularJS编写（PS：没办法，老板给钱咱就得维护，还得维护好）。<div ng-show="item.copy" class="clipboard-class" style="width
2021-11-09 16:30:19
2810
1
原创 抓取微信小程序源码并反编译（蓝叠模拟器）
我的电脑是win10系统，mac的没研究。（哎，穷逼买不起mac）准备工作：1.蓝叠手机模拟器（自带文件管理器----很重要）2.微信apk安装包3.nodeJS4.npm5.反编译工具文本亲测有效系统为 win10 64位系统第一步：安装蓝叠手机模拟器安装好之后，完全可以当手机使用（既可以认为这就是手机）蓝叠手机模拟器下载地址：https://www.bluestacks.cn/由于此模拟器自带文件管理器，所以不需要再安装别的文件管理器。如果没有的，可以安装RE第二步：将下载
2021-02-08 09:59:05
1192
原创 js 数组相同属性值去重
两个数组按相同属性值去重var polarr=[{name:"Tom",age:"8"},{name:"Marry",age:"9"}];var pollist=[{name:"Tom",age:"8"}];var result = [];for(var i = 0; i < pollist.length; i++){ var obj = pollist[i]; var num = obj.riskcode; var isExist = false; for(var j
2020-11-04 17:49:37
218
原创 JS session 多用于实时聊天
JS session 多用于实时聊天，首先我们先了解一下session机制和原理session机制：客户端第一次请求服务端时：服务端会产生一个session对象（用于保存该客户的信息）；并且每个session对象都会有一个唯一的sessionID(用于区分其他session)；服务端又会产生一个cookie，并且该cookie的name=JSESSIONID，value=服务端sessionID的值；然后服务端会在响应客户端的同时将该cookie发送给客户端，至此客户端就有了一个cook（JSESS
2020-11-04 17:40:32
447
原创 Html中meta标签详解
<!-- charset 此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖 --><meta charset="utf-8" /><!-- http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义 -->------------------------------Content-Security-Policy-----------------------------&
2020-05-12 15:54:21
240
原创 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？
（1）BMP，是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常具有较大的文件大小。（2）GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。（3）JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常
2020-05-12 15:27:39
1024
原创 layoutviewport、visualviewport 和 idealviewport 的区别
相关知识点：如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做layoutviewport。layoutviewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做vi
2020-05-12 15:25:58
530
原创 margin 重叠问题的理解
作者：爱前端不爱恋爱链接：https://zhuanlan.zhihu.com/p/114257330来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合并”。产生折叠的必备条件：margin必须是邻接的!而根据w3c规范，两个margin是邻接的必须满足以下条件：•必须是处于常规文档流（非float和绝对定位）的块级盒子，
2020-05-12 15:22:50
1066
原创 'display'、'position'和'float'的相互关系
原文链接（1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果positi
2020-05-12 15:20:14
385
原创 使用图片 base64 编码的优点和缺点
base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。使用base64的优点是：（1）减少一个图片的HTTP请求使用base64的缺点是：（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，
2020-05-12 15:18:05
1847
原创 前端css经常遇到的浏览器的兼容性有哪些？
（1）png24位的图片在iE6浏览器上出现背景解决方案：做成PNG8，也可以引用一段脚本处理。（2）浏览器默认的margin和padding不同解决方案：加一个全局的*{margin:0;padding:0;}来统一。（3）IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。#box{float:left;width:10px;margin:00010px;}这种情况之下IE会产生20px的距离解决方案：
2020-05-12 15:15:36
283
原创 CSS 清除默认样式
-因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。-当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法：（强烈不建议）*{padding:0;margin:0;}淘宝的样式初始化代码：body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input
2020-05-12 15:11:43
282
原创 Sublime常用插件详解
- Alignment使用说明：Alignment是一个代码格式化插件，它可以使多行代码中的等号对齐，也可以调整多行代码为一个缩进级别。快捷键：ctrl+shift+alt+a- AutoFileName使用说明：文件名自动补全，根据路径自动提示该路径下的文件- BracketHighlighter使用说明：BracketHighlighter插件是用来匹配相对的符号，然后高亮显示，比...
2019-11-28 16:01:02
353
原创 Cleave input输入框 自动格式化内容
Cleave.js 有一个简单的目的：帮助你自动格式输入的文本内容。 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性。通过使用这个库，您不需要编写任何正则表达式来控制输入文本的格式。然而，这并不意味着取代任何验证或掩码库，你仍应在后端验证数据。它支持信用卡号码、电话号码格式（支持各个国家）、日期格式、数字格式、自定义分隔符，前缀和块模式等，提供 CommonJS/AMD ...
2019-11-22 17:55:01
385
原创 前端重绘和重排详解 DOM CSS加载页面
浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN）从上面这个图上，我们可以看到，浏览器渲染过程如下：解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生成渲染树(Render Tree)Layout(回流):根据生成的渲染树，进行回流(Layout)，得...
2019-11-22 17:51:01
402
原创 JS this指向解析
与我们常见的很多语言不同，JavaScript 函数中的 this 指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。JavaScript 中，普通的函数调用方式有三种：直接调用、方法调用和 new 调用。除此之外，还有一些特殊的调用方式，比如通过 bind() 将函数绑定到对象之后再进行调用、通过 call()、apply() 进行调用等...
2019-11-22 17:18:29
210
原创 Javascript前端控制只能在手机微信端访问页面
最近接到一个只能在手机微信端访问页面的需求，限于不能跟微信做交互，所以用js来获取设备信息，前端校验锁死。关键点：PC F12被禁用PC backspace被禁用//ios终端 禁止ios10以下加在页面先校验，若不通过则window.stop()；停止一切代码加载，也防止了加载无用数据js代码```javascriptvar str = "本页面禁止PC端使用,请在手机微信客...
2019-11-20 17:50:33
1045
转载 Javascript 前台实现图片懒加载
适用于图片较多的页面，当页面图片太多，页面加载起来一直在转圈，谁也受不了，所以简单的方法实现图片的懒加载借用官方APIDOM.getBoundingClientRect()实现原理将资源路径赋值到img标签的data-xx属性中，而不是src属性，获取img节点距离浏览器顶部的距离，如果小于或等于浏览器窗口的可视高度，那么就将data-xx的值赋值到src里去代码html// im...
2019-10-22 14:01:46
180
原创 H5 input拍照上传图片，处理图片旋转压缩并转成file文件
之前图片上传都是上传的base64码，但是这次需要存到其他系统服务器，只接收file，所以整理了一个公共方法，主要用于移动端，PC端没有试过，包含图片的旋转，压缩和转成file文件。初始代码是循环压缩到100kb以下的，但是压缩超过3次以后，后台接到的file开始报错，偶发性，自己测试没有复现，上了生产就有问题，所以综合考虑改为100kb以下，只旋转，大于100kb只压缩一次了，不需要循环压缩的...
2019-09-12 17:33:08
1490
3
原创 iframe父子级交互
完全实现iframe，父子级交互，在实际项目中用过多次，还很理想，通过发送和接受参数，完美实现交互，废话不都，上代码。。。1.首先引入messenger.js文件/** * __ ___ * / |/ /___ _____ _____ ___ ____ ____ _ ___ _____ * / /|_/ // _ \ / ___// ___// _...
2019-06-26 09:34:49
348
原创 iframe 父子页面的交互
父页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父级页面</title> <style> * { margin: 0; padd...
2019-06-19 17:54:04
149
原创 ionic zooming="true" android端无法缩放的问题
ionic项目。ion-scroll zooming=“true” 在android端无法缩放的问题，这个问题我查找了一些国外文档，才找到了原因。在配置中添加$ionicConfigProvider.scrolling.jsScrolling(true); //允许缩放<ion-scroll zooming="true" min-zoom="0.5" max-zoom="2" direct...
2019-06-19 17:14:22
394
原创 移动端常见问题及解决方案
关于移动端的兼容问题，直接进入正题1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在andro...
2019-06-18 09:24:15
679
原创 js动态修改页面为可手动缩放
js代码$(‘meta[name=“viewport”]’).attr(‘content’,‘width=device-width, initial-scale=1.0, minimum-scale=1.0, minimal-ui’)
2019-06-18 09:15:52
991
原创 js实现表格首行首列固定滑动
js+css实现table首行首列的冻结效果。这个方案是把表格分为4块，首行首列不可滑动，利用onscroll 动态根据内容设置冻结首行首列内容。html 左上 左上 ...
2019-06-18 09:12:11
3010
原创 JS环形进度条 渐变色
html部分<div class="jixulvcontent"> <div class="jixulvmainball"> <span class="jixulvpertext">70%</span> <div id ="target" class="jixulv
2018-12-20 10:21:31
1106
原创 H5的canvas实现环形进度条
H5的canvas实现环形进度条html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width">
2018-12-20 10:07:37
705
查看tif格式文件tif.js
2021-12-06
3D动画相册和旋转木马相册.rar
2019-11-29
vue原生js轮播图组件.rar
2019-11-29
H5打开pdf格式文件，实现原理canvas
2019-06-29
CordovaCamera-master保存图片插件
2018-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人