- 博客(137)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 正则表达式——贪婪与非贪婪模式
1. 概述贪婪与非贪婪模式影响的是被量词修饰的子表达式的匹配行为。贪婪模式：在整个表达式匹配成功的前提下，尽可能多的匹配(最大范围匹配)；非贪婪模式：在整个表达式匹配成功的前提下，尽可能少的匹配(最小范围匹配)；2. 贪婪与非贪婪模式匹配举例eg:源字符串：aa<div>test1</div>bb<div>test2</div>cc正则...
2022-05-17 11:25:32
500
原创 设置white-space可使文本保留换行格式
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：normal：默认，忽略文本中所有的空白、换行符；只有文本存在 或文本达到框的约束时，文本才会换行nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文...
2022-05-11 10:28:10
918
1
原创 css float left换行不正常问题
理想效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="...
2022-05-05 16:34:47
685
原创 前端学习笔记
1.vue32.npm原文链接安装开发和生产依赖npm install axios -Snpm install axiosnpm i axios开发者npm install axios -Dnpm i axios -D生产环境不需要安装时，我们需要通过 npm install --production 来安装文件的依赖；卸载某个依赖包：npm uninstall packa...
2021-09-03 11:50:32
188
原创 pdf.js预览pdf文件
一、下载pdf.js二、使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>pdf文件预览</title> <meta name="viewport" content="width=device-...
2021-09-03 10:26:06
347
原创 IntelliJ IDEA导入Gradle项目，并启动项目
一、安装gradle,参考上一篇安装gradle二、导入gradle项目1.选择菜单栏的File->new->Project from Existing Sources...2.在打开的窗口选择对应Gradle项目的build.gradle文件，然后点击OK。3.在Open Project窗口中，点击Open as Project。4.选择菜单栏的Fil...
2021-09-02 09:51:30
23277
2
原创 安装gradle
(1).点击下载安装包(2).配置环境变量复制Gradle安装路径：E:\soft\gradle-2.11\gradle-2.11，在系统变量里添加GRADLE_HOME，变量值为Gradle文件解压的实际路径然后在系统变量 path中加入：%GRADLE_HOME%\bin(3).在cmd输入gradle -v验证是否安装成功...
2021-09-02 09:50:35
112
原创 vue启动服务Cannot GET /问题
在启动vue项目时，出现Cannot GET /提示，原因是之前修改了config下index.js的assetsPublicPath错误提示：Refused to load the image 'http://localhost:8075/favicon.ico' because it violates the following Content Security Policy direct...
2021-09-01 10:26:56
1061
原创 uni-app运行到H5正常，但运行到小程序不正常、报错总结
1.v-for中，非 h5 平台 :key 不支持表达式 index+'_'同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。// 错误的写法<view v-for="(item, index) in list1" :key="index">{{item}}</view><view v-for="(it...
2021-09-01 10:22:08
7004
1
原创 解决sourcetree无法推送
如果项目是使用的https的地址，推送没有问题，但是如果是使用的是 ssh 的地址，推送的时候出现了问题。解决方法一：配置ssh密钥，方法参照之前的文章生成密钥文件，然后配置sourceTree解决方法二：直接关闭SSL证书校验的方法进行提交：git config --global http.sslVerify false...
2021-08-25 14:12:28
2612
1
原创 节流与防抖
节流-throttle节流的意思是，规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。具体场景可以是抢购时候，由于有无数人快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。防抖-debounce防抖的意思是，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操...
2021-08-09 13:40:49
2191
原创 使用jquery的load方法加载layui的模板资源404
需求是在父页面有个导航栏，点击导航栏，下面的内容区域使用jquery的load加载。假设主页面为index.html，使用load加载的子页面为main.html。其中，main.html里需要用到layui的级联选择器。在layui官网插件市场找到扩展插件cascader，下载示例demo到本地。运行正常：接下来将main.html嵌入到index.html中，运行发现...
2021-07-30 17:09:45
2731
原创 gitlab上传项目出现Permission denied, please try again.
使用gitlab克隆项目输入密码后一直出现Permission denied, please try again.如下图所示：主要是工程的SSH key没有加入到你的gitlab账户下解决办法：1.首先打开git bush配置SSH key，这个不需要在要上传的路径下进行，只在系统路径下即可。输入以下命令后回车cd ~/.ssh/2.接下来在.ssh路径下配置全局的name和e...
2021-01-07 21:01:09
5182
1
原创 好用的富文本编辑器TinyMCE介绍及使用
TinyMCE是一个轻量、简洁、功能强大的编辑器。公司之前使用过kindEditor和wangEditor。kindEditor：功能强大，代码简洁，有常用的从txt和word复制、多图上传等功能，但是没有格式刷，运营的妹子经常反馈生成多余的空行，并且插入h5的video标签默认也会被过滤掉，项目到2016年便不再维护了。wangEditor：轻量、简洁、易用，但是功能有限，没有多图上传、格...
2020-08-06 17:08:02
4745
3
原创 node.js--exports与module.export的用法示例
在nodejs中，提供了exports 和 require 两个对象，其中 exports 是模块公开的接口，require 用于从外部获取一个模块的接口，即所获取模块的 exports 对象。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。1、返回一个JSON Object//app.jsvar app ...
2020-06-19 16:47:10
569
原创 图片自适应等比缩放之object-fit
object-fit：指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。与我们熟悉的background-size属性有点相似。contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内...
2020-06-18 11:45:29
1933
原创 video移动端踩坑记
最近做的项目里涉及到一个视频列表，点击播放视频，有点类似短视频APP个人主页的效果，直接使用了h5自带的video标签，没想到坑一个接一个。首先展示下效果图：踩坑记录：踩坑一：视频列表中直接使用多个video标签无法达到产品的设计效果，在ios微信浏览器，即使没有设置controls属性，还是有一个非常大的播放按钮，巨丑，在华为微信浏览器里，没有设置controls属性则不显...
2020-06-17 17:17:10
1327
原创 H5吸顶功能--划到某一元素处将其固定在顶部
在网页里经常遇到这样的情况，滑动页面至某一个元素处，元素一直固定在顶部或底部，当页面滑到元素原有位置上方时，元素恢复原有位置。例如京东秒杀的活动时间，还有常见的搜索输入框固定在顶部。利用js写了个搜索输入框固定在上方的例子，效果示例如下：主要用到了offsetTop与scrollTop。offsetTop:元素到其上级层顶部的距离.scrollTop:网页被卷去...
2020-06-16 16:08:44
1834
原创 百度浏览器屏蔽H5固定在底部按钮之解决方案
最近在做一个活动页的时候遇到一个奇怪的问题，活动页底部固定一个按钮，但是在百度浏览器打开时按钮一闪不见，而只有百度浏览器会这样。查询资料发现，这是百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）,使用position:absolute或fixed的元素都会被屏蔽掉。解决办法：使用伪元素的背景图片实现按钮的显示，页面元素放空标签。 &l...
2020-06-15 10:18:59
1891
原创 移动端，pc端实现点击复制功能，亲测有效
在项目中经常有点击复制一段内容或链接的功能，分享下实现方法：方法一：利用input,textarea特有的select()方法，该元素不能设置display:none和 visibility: hidden;否则无效，可以设置opacity: 0;或者利用定位到屏幕之外不可见的地方<!DOCTYPE html><html><head lang="en">...
2020-06-13 17:00:47
2528
原创 H5活动开始/结束倒计时实现
最近在做一个活动页，根据后台返回的活动开始时间、结束时间判断当前活动的状态以及实现倒计时效果，上一篇文章有记录ios倒计时踩坑，这里记录下倒计时效果实现。倒计时效果js: /**获取现在的时间*/ var nowTime = new Date().getTime(); /**活动开始时间*/ var startT ...
2020-06-12 16:25:21
1142
原创 ios new Date()NaN解决办法
最近在做一个活动页，根据后台返回的活动开始时间、结束时间判断当前活动的状态以及实现倒计时效果，在pc浏览器和安卓手机测试均没有问题，但是在ios上不显示倒计时。后台返回的日期格式如下：2020-04-20 10:43:35js获取该日期的毫秒数:var startT = '2020-04-20 10:43:35';console.log("getTime:"+new Date(start...
2020-06-10 09:50:29
640
原创 小程序自定义组件实现
在日常开发中，经常会有代码复用的情况，比如在很多个页面里，发现用户没有登录需要弹框登录的时候，比如多个页面顶部都有一个搜索框或者列表底部的暂无数据等等。这个时候我们可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。这里举一个弹出框登录组件的例子：进入小程序获取到用户昵称和头像，点击登录把当前页面的用户昵称和头像传给组件...
2020-06-08 10:02:33
444
原创 小程序开发笔记《七》使用canvas绘制带二维码海报并预览保存到相册
小程序生成带二维码的海报效果预览：项目需求：需要根据用户信息生成用户个人二维码，后台提供海报素材，将用户二维码画在海报上，并可预览海报，长按保存海报，方便用户分享或者发朋友圈。涉及到的相关API：wx.getImageInfo()----获取图片信息wx.getSystemInfo()----获取系统信息，包括屏幕宽高，设备型号，设备像素比等wx.canvasToTem...
2020-06-06 14:15:38
1034
原创 小程序开发笔记《六》如何生成自己的二维码
需求说明：根据用户登录名生成每个人的专属二维码。微信小程序有提供生成小程序码的方法，但是却没有生成普通文本或网页链接二维码的方法，因此自己去网上找了插件weapp-qrcode，它是根据qrcode.js改进的。效果预览：使用方法：wxml:<canvas style="width: 200px; height: 200px;" canvas-id="myQrcod...
2020-06-03 09:31:45
1301
原创 小程序开发笔记《五》上传图片、预览图片
上传图片是日常项目中经常遇到的功能，需要使用到wx.chooseImage(Object object)函数。参数说明如下：实现思路：先调用小程序打开相机或从相册选图接口wx.chooseImage(Object object)，然后将返回的图片参数调用图片上传接口wx.uploadFile(Object object)，并将图片回显到页面，对图片绑定预览事件，预览的过程中用户...
2020-06-02 14:42:18
250
原创 小程序开发笔记《四》picker回显之省市二级联动
上篇文章介绍了小程序自定义省市二级联动选择器，但是当用户保存省市信息后再次进入页面，需要将选择器回显，这篇文章主要讲述自定义选择器回显。实现思路：通过后台返回的省份编码，获取该省份在省份列表数组的下标值，并根据省份编码拿到该省份下的市级列表，并把市级列表放入picker的range属性对应数组的第二列，然后根据后台返回的市级编码获取该市级在市级列表数组的下标值，拿到这两个下标值存入数组中然后赋...
2020-06-01 16:25:20
946
原创 小程序开发笔记《三》自定义省市二级联动
小程序的picker组件给我们提供了单列、多列、时间、日期、省市区三级联动选择器，用起来非常方便，但有时候无法满足特定的项目需求，所以就需要根据项目需求自己动手实现啦。项目需求：供用户选择省市二级联动选择器，并将省份编码、市级编码存入数据库。与小程序picker组件mode = region的省市区三级联动不同，这里只需要二级，并且需要省份编码、市级编码。效果示例：实现思路...
2020-05-29 16:52:10
1145
原创 小程序开发笔记《二》json转数组
在项目开发的时候，经常有json转数据的需求，例如小程序的picker组件里range属性值为数组，而当我们已有的数据是一个json时，这时候就需要转换一下，和js的写法一样，只需要在小程序里新增加个转换方法。假设已有json如下:var provinceJson = { "110000": "北京", "120000": "天津", "130000": "河北", "1400...
2020-05-27 11:34:13
1825
原创 小程序开发笔记《一》拨打电话
小程序点击电话号码拨打电话功能实现方法：wx.makePhoneCall。方法说明：示例代码：wx.makePhoneCall({ phoneNumber: '400-000-0000',})效果如下：原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe...
2020-05-26 11:29:49
484
原创 小程序实现文字两端对齐
我们知道，text-align: justify;对最后一行无效，当有一个段落而最后一行只有两个字时，text-align: justify;的效果是前面N行两端对齐，最后一行居左，这样有利于用户的视觉体验，但是当我们只有一行文本，该怎么实现单行文本两端对齐呢？效果如下：方法一，利用伪类after新增一行，使该行文本不是最后一行wxss:.ul .li label:after...
2020-05-21 15:36:30
6537
1
原创 小程序跳转tabBar无效解决办法【switchTab before pages are registered】
项目需求是进入小程序首先展示落地页，若已授权登录则跳转到小程序的tabBar首页，直接使用 wx.switchTab进行跳转有时候会失效，并提示以下信息：switchTab before pages are registered.百度了解决办法，网上说把调试基础库调到最新的版本（工具-->项目详情-->调试基础库），调到2.11.0后依旧不生效。最终解决办法：使用延...
2020-05-20 17:04:18
1107
原创 background-size值：cover、100%和contain的区别
background-size 属性规定背景图像的尺寸。先看看W3C的解释：background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形图片右边有空白区域background-size：100% 100%;---按容器比例撑满，图片变形；图片被横向拉伸background-s...
2020-04-30 21:38:02
27470
1
原创 一行代码解决IE浏览器的兼容问题
之前在开发项目的过程中，遇到过因为IE版本产生的兼容问题。在自己电脑上用IE浏览器打开没有发现问题，在他们的电脑上用360浏览器兼容模式打开项目，出现不兼容的问题，而我们的360浏览器版本是一样的。最后，经过查阅资料发现，360兼容模式出现的兼容问题，实质还是IE的兼容问题，每个电脑内置的IE版本是不一样的，我的电脑内置IE的版本高，而同事的版本低导致出现渲染页面时出现问题。解决办法：在hea...
2020-04-29 21:23:19
1775
原创 iframe在ios设备宽度超出屏幕解决办法
做h5项目时，使用iframe嵌套一个h5子页面在ios手机上出现超出屏幕的问题。子页面本身是没有超出屏幕的，给iframe；设置了宽度100%没有起作用，在ios手机上为超出屏幕，但是在安卓手机上显示正常。解决办法:给iframe设置属性scrolling=‘no’给iframe设置样式：width: 1px; min-width: 100%; *width: 100%;...
2020-04-24 17:41:46
1200
1
原创 IOS端点击事件不生效
给遮罩层的关闭按钮绑定点击事件却无反应。<i class='i-close' ></i>$("body").on("click",".i-close",function () { $(".win").fadeOut();})原因：IOS只识别a标签，button按钮之类的，对于i标签无效。解决办法：对i标签添加cursor: ...
2020-03-10 19:56:09
729
原创 freemarker在项目中经常使用到的语法总结
判断data.tag不为null<#if data.tag??></#if>判断data.tag不为null且不为空字符串""<#if data.tag?? && data. tag!= ""></#if>判断data.is_top不为null且等于1<#if data.is_top?? &...
2020-02-25 19:46:29
255
原创 使用freemarker生成静态文件踩坑记录
使用freemarker生成静态文件时本地可以正常生成，发布到线上却没有生成文件也没有报错，后来发现线上项目里有两个freemarker.jar包，编译器默认使用版本低的包，而代码里却是使用的高版本jar包，导致没有生成文件。Configuration configuration = new Configuration(Configuration.VERSION_2...
2020-02-08 11:58:11
602
原创 js获取近N天的日期,返回'YYYY-mm-dd'格式
开发中经常遇到获取时间的业务，将常用的方法做个笔记记录下。<html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> function getRec...
2020-01-10 10:41:05
461
原创 layui集成echars绘制图表实现多图例效果
效果图layui.define(function(exports){ var admin = layui.admin; //区块轮播切换 layui.use(['admin', 'carousel'], function(){ var $ = layui.$ ,admin = layui.admin ,carousel = l...
2020-01-09 09:43:30
4641
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人