![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
bluelotos893
谦谦君子,温润如玉。
展开
-
前端压缩图片,上传前预览图片
上传预览图片、前端图片压缩原创 2022-12-10 16:17:32 · 216 阅读 · 1 评论 -
vue中更改input值后,同步更新model的值
在vue中有时需要对输入的值进行判断,并重新赋值,PC端可以直接监听keydown的keyCode值限定输入,移动端则不行,只能在用户输入后,再拿到相应的值做处理,如果是单个input,用input事件就可以进行处理,如果是批量的表单,那我们还是需要通过事件代理的形式,在需要限制输入的input上加个类名,并主动触发一下元素的input事件,就可以同步更新vue中相应data的值了。//数字输入框,输入内容后进行判断,并触发vue绑定值的更新 $("body").on("keyu...原创 2021-04-14 20:24:21 · 2414 阅读 · 0 评论 -
jQuery点赞效果
<script type="text/javascript">(function ($) { $.extend({ tipsBox: function (options) { options = $.extend({ obj: null, //jq对象,要在那个html标签上显示 str: "+1", //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</原创 2020-07-21 09:51:44 · 284 阅读 · 0 评论 -
iOS在微信中不全屏播放及允许div元素在video上
<video class="video-player" playsinline="" //IOS微信浏览器支持小窗内播放 webkit-playsinline="" //IOS微信浏览器支持小窗内播放 preload x5-video-player-type="h5-page" //同层播放器窗口播放 x5-video-player-type="h5" //同层播放器全屏播放 x5-video-player-fullscreen="true" //同层原创 2020-06-15 09:11:30 · 1090 阅读 · 0 评论 -
iOS | Android 各版本发布日期
安卓最新设备的版本一般在谷歌推送版本后半年后,开发时推断主流设备时可参考。年份iOSAndroidiPhone小米手机20071.0–iPhone–20082.01.0iPhone 3G–20093.02.0iPhone 3GS–20104.02.3iPhone 4–20115.03.0iPhone 4s小米120126.04.1iPhone 5小米220137.04.3iPhone 5.原创 2020-06-14 10:36:47 · 935 阅读 · 0 评论 -
table固定表头
table内容很多的时候需要固定表头以获取更好的浏览体验,这就需要另外制作一个内容一样的表头来掩人耳目,但是由于是两个不同的表格,随着真实表格内容的变化,真实表格表头的宽度也会随之变化,而赝品的表格则不会变化,分分钟就露馅了。解决思路:保持两个表格的宽度一致保持表头的th或者tr宽度一致保持两个表格的边框、padding样式一致赝品的表格定位在顶部不跟随滚动表格数据变化时宽度会改变...原创 2019-04-01 19:24:13 · 3040 阅读 · 0 评论 -
前端上传图片预览
读取文件转为url有两种方式,一是FileReader -base64格式,二是URL.createObjectURL - blob格式,后者要比前者短很多很多,使用FileReader读取多张照片文件赋值给img后,安卓的微信明显会有感到卡顿,将整个DOM结构复制到vscode编辑器一看,编辑器也吃不消了,这样看来后者性能要好一些。兼容性问题看公司需求吧,主流的设备貌似没什么异常。<!D...原创 2019-04-12 17:40:31 · 139 阅读 · 0 评论 -
bootstrap前端分页的DOM生成
前端分页需要的几个数据:记录总条数、每页显示多少条,从第几页开始,最多显示多少个页码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...原创 2019-04-09 18:31:58 · 267 阅读 · 0 评论 -
postman客户端 携带cookie信息的PUT请求
1.Chrome安装插件 Postman Interceptor2.浏览器登录网站,拿到cookie相关信息,填写到postman工具中,请求的参数可根据自己情况填写原创 2019-05-30 09:24:17 · 573 阅读 · 0 评论 -
MUI使用小记
使用了mui绑定tap事件后,再绑click事件,则click事件不会生效,所以移动端最好就是用tap。2.使用on的方式绑定事件时,事件类型后面必须要写选择器,否则会报错,这点有别与jQuery,要留意。3.mui自带的轮播图不是特别理想,项目中又另外用的是swiper,后者专业做轮播图的,当然选专业的了。...原创 2019-06-25 23:47:47 · 185 阅读 · 0 评论 -
iOS微信中点击表单元素后触摸点错位的兼容
在微信中iOS点击输入框、选择框,点击软键盘上的完成后,底部依然有空白,这就导致了触摸点发生错位,错位的偏移位置大概就是底部留白的部分,在网上搜了其它一些资料后,自己写了这段代码到项目里,管用!不过还是希望微信能早日解决这个问题吧,毕竟看到最初反馈这个问题是在2018年年底的时候了。。 var iOSPagescrollTimer = null; $("body").on("foucs",...原创 2019-07-25 17:45:56 · 763 阅读 · 0 评论 -
获取每年第一个星期一的日期
业务需求:将本年第一个星期一的日期(即完整的一周)作为起始周,这就需要判断去年最后一周有几天在第二年,或者本年第一天是星期几,相应的减去占用的天数。//计算一年总共多少周 function getNumOfWeek(year) { var firstDay = new Date(year + "/01/01").getDay(); //本年第一天是星期几 ...原创 2019-03-28 11:41:39 · 997 阅读 · 0 评论 -
百度语音合成不能自动播放问题
在安卓4.0版本(电视自带系统)里的浏览器测试,在PC端正常的语音合成功能失效,一步一步排查,发现两个问题,一是document.body.append方法错误,二是audio.play()报错,且audio标签不支持autoplay属性,遂看了一下网易云音乐等其他音频网站,都不能自动播放,需要交互才行。只能先放弃了。另外遇到的一个问题是在HTTPS协议下,如果audio的src源是http的,...原创 2019-03-28 10:07:22 · 1475 阅读 · 0 评论 -
js获取video任意时间的画面截图
首先就是要把视频加载出来,然后使用canvas.getContext(‘2d’).drawImage(videoElement, 0, 0, canvas.width, canvas.height);获取到当前视频时间的截图,需要不同时间的video视频图,设置video的currentTime(单位秒),然后videoElement这个对象信息会实时更新。如果是视频是在阿里云OSS上就更方便了...原创 2019-04-10 19:10:05 · 8549 阅读 · 4 评论 -
移动端元素跟随移动-防苹果悬浮球效果(转载)
非常感谢原作者的分享,毕竟自己折腾了快一天还是有很多问题,感觉主要就卡在了事件对象的获取上和兼容性的问题;第一段代码是我自己的,在页面没有滚动条的情况下没问题,有滚动条时就出现Bug了; //这个函数的目的是实现长按时才执行元素移动,我刚开始的逻辑是长按时移动悬浮球,点击时出现弹框 $.fn.longPress = function(fn) { var timeout转载 2017-12-14 18:14:33 · 1784 阅读 · 0 评论 -
开发备忘
HTMLform表单中的button标签如果没有设置type属性,那么默认属性为submit,点击后会发生页面刷新,如果不需要页面刷新,应设置type为button;textarea标签书写时不要有空格或者换行,否则在获得焦点的时候光标无法在开始的位置,用户体验很不好;注意嵌套规则,当把div嵌套在p标签里时,div会自动跑到p标签的外面 ,有几个特殊块级元素只能包含内联元素,不能包含块原创 2017-09-13 17:27:02 · 321 阅读 · 0 评论 -
手写签名插件—jSignature使用心得
最近需要做一个移动端手写签名的功能,上网搜了一下基本都是jSignature这个插件,几乎没得第二选择,于是照着网上的各个版本copy测试,在PC端测试是没什么问题的,很easy。 问题1::在移动端改变了canvas的父盒子大小后就出现问题了,手写的和显示的不在一起,jSignature画笔出现了偏移,经过审查元素发现,是由于canvas的尺寸大小变成了100%引起的,解决办法就是需要原创 2017-12-27 16:44:04 · 30661 阅读 · 8 评论 -
微信loading动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-06 21:56:48 · 671 阅读 · 0 评论 -
网易loading图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-06 21:57:38 · 218 阅读 · 0 评论 -
iOS下div contenteditable=true无法输入解决办法
首先是要加一个给可编辑的div加一个样式-webkit-user-select:text,因为div里面可能还有子元素,所以需要这样写:div{ -webkit-user-select:text; height:auto;}div *{ -webkit-user-select:text}有滚动条的时候会变得体验不好,输了文字后不显示等异常情况,所以尽量不要把可...原创 2018-08-22 19:10:01 · 4648 阅读 · 0 评论 -
模仿Excel设置单元格 -- table单个TD的边框颜色效果
最近有这么个需求,鼠标点击td时需要变化td的颜色,由于一般都是适用了·border-collapse: collapse;这个属性,故相邻的两个td共用一个边框,先看一看设置不同值的效果:解决思路:直接设置行不通,设置2px又显得太宽了,不过看了WPS的表格选中状态时就是会比其它的要宽一倍的,而且行之间切换时td的高度会变化,会有跳动的感觉,所以当自身实现不了时,就得靠其它的元素来辅助了,上...原创 2018-10-27 17:45:47 · 1847 阅读 · 1 评论 -
上传图片时显示进度条
什么是FormData?FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同;如何创建一个FormData对象你可以自己创建一个FormData对象,...转载 2018-12-25 16:20:00 · 2221 阅读 · 0 评论 -
input 与其他元素对齐
相信大家一定遇到过input与其他元素无法对齐的情况,不论type是text、radio、CheckBox,由于input有其独特的默认样式,padding和border、行高、字体样式等。1.radio、CheckBox类型:这两个在设置好大小后使用position:relative,设置top值,根据相邻元素高度去设置,一般情况下都没问题第二种就是设置input父元素为相对定位,设置上...原创 2019-03-13 11:35:57 · 2642 阅读 · 0 评论 -
rem的使用
通过SASS方式要弄明白rem的使用,需将这几个概念结合起来自己推演一下:屏幕大小和设计稿的宽度,将设计稿分为多少份,根元素字体大小,否则看到别人的代码不知道为什么那样写,公式中数值的设定前提是对于某一尺寸的设计稿和基准字体大小而言的。以下假定设计稿宽度为750px情形:// 媒体查询@media screen and (width:375px) { html { ...原创 2019-04-04 11:18:45 · 411 阅读 · 0 评论 -
让两个div元素有相同的高度
取得它们的高度后得到最大高度,然后赋值 var $divClass = $('.className'); var height = 0; $divClass.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $divCla原创 2017-11-22 10:44:21 · 4409 阅读 · 0 评论