js、jq问题收藏
一只小药锅
程序小白,记录遇到的问题
展开
-
减少回流(reflow)和重绘,采用文档碎片
一般我们将内容插入到页面,如appendChild()、innerHtml()都会触发回流或重绘。appebdChild()优势:把需要的动态绑定的内容一个个追加到页面中,对原来的元素没有任何影响缺点:每当创建一个li标签,我们就添加到页面中,引发一次回流innerHtml() 字符串拼接的方式(最常用)优势:事先把内容拼接好,最后统一添加到页面中,值引发一次回流缺点:我们把新拼接的字符串添加到url中,原有的三个鼠标滑动效果都消失(样式不受影响)回流(又称重排,reflow):原创 2021-01-04 16:38:05 · 251 阅读 · 0 评论 -
js求平均值
函数的参数都是类数组的集合,因此需要先转换成数组,再进行操作。平均值:要去最大值,最小值后再合计相除,就得出结果。1.常规做法// 获取平均数// arguments.sort() //->argument.sort is not function arguments是一个类数组集合,它不是数组,不能直接使用数组的方法function avgFn(){ // ->将类数组转换为数组 let ary = []; for(var i=0;i<argum原创 2020-12-31 17:53:17 · 5335 阅读 · 1 评论 -
封装一个时间转换(正则)的方法
var myFormatTime=function(str,time){ var numreg = /\d+/g,arr = []; time.replace(numreg,function(){ arr.push(arguments[0]) }) var reg = /{(\d+)}/g; //加()是进行分组 str = str.replace(reg,function(){ var num = arguments[1],val.原创 2020-12-31 17:25:35 · 145 阅读 · 0 评论 -
js数组求最大值和最小值
找出数组中的最大值和最小值,你能想出几种方法呢?1.排序法 sortvar ary = [12,23,24,46,13,59]ary.sort((a,b)=>{ return a-b;})var min = ary[0];var max = ary[ary.length-1]console.log(min,max)2.假设法 *var ary = [12,23,24,46,13,59]var min = ary[0],max = ary[0];for(v.原创 2020-12-22 10:27:02 · 3354 阅读 · 2 评论 -
图片懒加载(IntersectionObserver)
图片的性能优化也是我们经常用到的。实现效果如下:图片在视口的底部出现加载的图片(占位 保证页面不空白),当图片完全显示在视口就将图片加载出来。原理如下:图片向上移动,会触发两个交叉。一次是进入时,一次完全出去时。这里主要方法是:getBoundingClientRect()获取到可视口的距离。页面:<div class="laztImageBox"> <img src="image/loading.png" lazt-image="https://ti原创 2020-10-28 16:26:46 · 692 阅读 · 0 评论 -
wangeditor修改-修改上传视频大小
提了个需求支持修改上传视频的大小,wangeditor支持修改图片的大小这个我们是知道的,但视频的大小的修改,源码是没有的,搜索也没有找到,因此只能读源码以及参考修改图片大小的案例作为参考进行整改,实现效果如下:修改如下:1.给上传的视频新增一个绑定的方法来获取上传视频的信息2.可以根据_imgHandle的位置后加入该方法_videoHandle:function _videoHandle(){ var editor = this.editor; var $textE原创 2020-08-07 11:41:35 · 3356 阅读 · 0 评论 -
pc、h5微信授权登录
pc登录微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息)h5登录微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权):调用接口获取code、用户信息(进行存储)官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html// h5微信授权function login(.原创 2020-07-23 10:07:19 · 890 阅读 · 0 评论 -
swiper(左右滑动)动态加载数据
实现效果如图:(自动滚动切换)代码:function exampleBoutiqueList() { params = { page: 1, pageSize: 3 } flowload(params, app.serverUrl + "/boutique/get/exampleBoutiqueList", "GET", '.swiper-wrapper') //懒加载}var swiperlis = []function flowload(data, url, type原创 2020-06-30 11:09:33 · 2033 阅读 · 0 评论 -
swiper(pagination)自定义分页swiper中loop:true时,click点击无效
参考:swiper官方文档自定义分页这里我碰到的问题:1.swiper默认是是小圆点,而我这里需要矩形的。通过官方的pagination中的rederCustom()来进行自定义。2.碰到另一个坑,loop:true时,onclick会失效,这时候可以通过on进行绑定方法。3.当切换列表重新加载图片时,图片不更新,这里可以在autoplay中设置stopOnLastSlide: false,disableOnInteraction: false,在这里的作用是进行初始化。(每次点击切换就会.原创 2020-06-12 16:25:59 · 4671 阅读 · 0 评论 -
实现定位(百度地图)
实现效果图:实现步骤:1.先去百度api创建,并引入:2.定制一个容器(弹窗)3.执行方法(这里我写了不同的获取地址方法,主要原理都是根据经纬度来进行定位)function getMap(){ // 获取客户的经纬度 var map = new BMap.Map("allmap"); let maplist = _all.province.center.split(',') var point = new BMap.Point(maplist[0],maplist[原创 2020-05-25 00:18:00 · 806 阅读 · 0 评论 -
支付宝、微信(pc+h5)支付
//支付宝支付(pc端是一个二维码,移动端是唤起app进行支付)function aliipay(order) { let orderList = {orderId: order}; //订单号 waitOrderStatusChange(order,0); //判断订单状态 var url = ""; let url_qrcode = "/api/aliPay/aliPayH5Order"; //电脑h5支付 let url_h5 = "/api/aliPay.原创 2020-05-11 22:10:53 · 593 阅读 · 0 评论 -
jquery设置checkbox勾选,第一次有效,重复后失效
调试页面的时候发现用attr()改变checked,实现全选功能的时候发现,第一次点击有效,之后点击全选功能便实效。一开始以为是自己写错了,在各种碰壁之后,才猛然发现,原来这是jq的一个小bug。在jquery 1.6之后的版本中,改变元素的boolean类型属性用prop才能生效,而其他类型属性则继续沿用attr();$('input').attr('checked',true);应...转载 2020-05-07 14:46:02 · 459 阅读 · 0 评论 -
前端-打印(pdf、图片)
打印的核心:window.print()方法1.打印pdf我这个的实现思路大致-拿到后台返回的pdf就加载print()方法进行打印。这里只时候在本地,如果打印不同服务器的,会出现跨域问题。htmljs出现跨域问题2.打印图片思路:通过弹出新页面进行打印(这里是默认图片过大:根据需求进行设定即可),两者思路都差不多。但这个不会...原创 2020-04-27 01:35:16 · 2822 阅读 · 0 评论 -
tabletree使用
设计图是这样子的:(看起来像table又有tree)这里的部门跟业绩是两个不同的接口,这里我是使用jquery-tabletree来解决的:可以参考这个http://www.jq22.com/jquery-info14949下面是我的实现代码:核心引入:<linkrel="stylesheet"type="text/css"href="css/tree...原创 2020-04-27 01:34:09 · 1267 阅读 · 0 评论