- 博客(36)
- 收藏
- 关注
RSS订阅原创 git stash drop恢复贮藏
git fsck --lost-found 生成丢失文件记录需要通过执行命令 git show XXX 提交id来搜索每一个对象（输入commit的id,不是blob或者tree，如果记录特别多可以通过时间快速定位，而不是核对提交内容）找到删除的代码，执行git stash apply XXX...
2022-02-15 16:50:18
779
原创 子元素自适应填充父级高度
初始样式元素结构<div class="main-box"> <div class="main-title">标题</div> <div class="main-content"></div></div>css样式.main-box{ /* 父级元素 */ display: flex; flex-flow: column nowrap; height: 100vh; .
2022-02-10 15:04:19
494
原创 webpack引入cdn资源
安装插件webpack-cdn-plugin npm install webpack-cdn-plugin --save-dev // or webpack-cdn-plugin --dev位置webpack.base.config.js，引入插件webpack-cdn-plugin下面展示一些 内联代码片。 const WebpackCdnPlugin = require('webpack-cdn-plugin')new WebpackCdnPlugin plugins: .
2022-01-27 11:00:11
1605
原创 ios兼容踩坑总结
ios兼容踩坑总结前言：h5移动端开发，ios会遇到各种兼容适配问题，以上是部分遇到的问题，特此总结。1、解决ios动画闪白屏问题：transform: translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0);2、web
2021-07-29 15:22:01
772
原创 react移动端页面滚动到固定位置显示对应DOM
react移动端页面滚动到固定位置显示对应DOM前言：需求如果进入页面列表标题可见则显示购物车图标，否则监听页面滚动到列表标题显示再显示购物车图标；；1 . 样式效果如下：在这里插入图片描述2 . 事件代码片段 constructor(props) { super(props) this.state = { cartNum:0,//购物车数量 cartBarShow:{display:'none'},//购物车i
2021-05-20 11:46:24
849
原创 H5唤起app
H5唤起app前言：H5页面点击按钮，判断手机时候安装app,安装则与ios和Android沟通交互传值方式，未安装则跳转app下载页；1 . html代码片段// html代码片段// 唤起app按钮<a class="open-app down_app_btn_open">打开APP</a>2 . js代码片段$('.down_app_btn_open').on('click',function(){ // app下载页 var openUrl = '.
2021-04-14 17:38:27
153
原创 瀑布流&下拉加载
瀑布流结合列表下拉加载动画过渡展示前言：需求默认瀑布流展示列表，下拉加载的时候看到列表顺序过渡加载；1 . 效果样式（如下）下拉瀑布流加载图片列表2 . 引入文件（用到macyjs瀑布流与下拉加载插件mescroll）mescroll官网：http://www.mescroll.com/macyjs官网：http://macyjs.com/<link rel="stylesheet" href="/static/ctrip/swiper-bundle.min.css"><l
2021-03-26 17:18:57
519
原创 小程序授权后【保存图片】到相册
wxml代码片段<text>（点击图片即可保存）</text> <image src="{{item.code}}" data-src="{{item.code}}" class="pic_code" bindtap="saveImg"></image>js代码片段// 保存二维码saveImg:function(e){ let src = e.target.dataset.src; let that = this; wx.showLoadi
2021-03-22 18:14:54
146
原创 qrcode生成带logo二维码
qrcode生成带logo二维码要点：因为qrcodejs生成二码后会把canvas隐藏，华为手机不生效且微信不支持canvas长按识别，需要把canvas转图片；1 . 引入文件<script src="/static/js/jquery-3.5.1.min.js"></script><script type="text/javascript" src="/static/js/qrcode/qrcode.min.js"></script>2 .
2021-01-25 11:41:40
1453
原创 自适应图片高度轮播
TweenMax结合Swiper实现根据图片高度动画过渡切换轮播前言：需求是轮播不限制图片高度，平缓自然过渡与切换；1 . 使用（可以到官网自行下载）：//引入文件<link rel="stylesheet" href="/static/ctrip/swiper-bundle.min.css"><script src="/static/js/jquery-3.5.1.min.js"></script><script src="/static/ctrip/
2021-01-09 18:03:19
485
原创 H5右侧悬浮
前言：实现H5右侧悬浮，点击展开收回移除；示例如下 ↓默认：点击动画移入：html代码片段： <div class="right_item_menu"> <i class="right_menu_icon"></i> <div class="right_item" style="display: none;"> <span class="right_item_title">今日XXX</spa
2020-10-31 16:15:05
1433
原创 thinkphp volist遍历获取数组下标
thinkphp volist循环遍历获取数组下标$key直接使用 {$key}；<ul> {volist name="list" id="item"} <li index="{$key}">{$item}</li> {/volist}</ul>注：指定key，会输出循环值；<ul> {volist name="list" id="item" key="k"} <li>{$k}</li> {/v
2020-08-26 10:23:57
1863
原创 腾讯云批量上传文件（前端）
腾讯云批量上传文件（前端）前言：1、腾讯云上传文件，遍历调用上传方法；2、根据文件文件后缀名判断上传成功后，文件的回显形式；3、在腾讯云建立存储桶；（需要后端配合写上传接口，线上测试）1 . 效果样式（如下）1、引入cos-js-sdk-v5.js文件<script src="../sdk/cos-js-sdk-v5.js" charset="utf-8"></script>2 . html代码片段（使用input上传）<fieldset> //点
2020-07-16 18:37:38
1792
原创 zTree自定义样式图标---纯CSS样式实现
纯CSS样式覆盖，实现zTree自定义样式图标1 . 效果样式（如下）2 . 修改设置，隐藏默认图标var setting = { view: { showTitle: false, showLine: false, showIcon: false,//不展示图标 selectedMulti: false, dblClickExpand: false, nameIsHTML: true, addD
2020-06-24 17:17:36
2625
原创 layui.table表格视图切换
layui.table表格视图切换前言：需求是使用layui的表格，展示不同的视图，数据不变共用一套toolbar搜索以及表格页码，更换中心内容展示方式；1 . 效果样式（如下）点击按钮动态切换视图难点：1 . 区分每一个laydate选框；2 . 要求开始时间不能大于结束时间；3 . 点击上方时间范围下方同步更改；2 . html代码片段//按钮绑定事件 <button class="layui-btn layui-btn-sm layui-btn-warm" lay-ev
2020-06-06 14:53:14
1893
4
原创 maphilight添加click事件
修改jquery-maphilight.min.js源码添加click事件源码中的修改由于使用的压缩版js,可能可读性较差（贴图）HTML代码片段图示（如下）源码中的修改//点击事件触发时，关闭之前选中区域if(b.trigger === 'click') L(T);if(O.trigger === 'click'){//点击事件的绑定方式 F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("click.maphilig
2020-06-05 19:16:04
689
原创 点击图片查看原图（图片按比例展示，点击旋转）
使用layer弹框：实现点击图片查看原图的效果；引入layer，函数封装：// 点击图片查看大图function showImage(imgDom) { layui.use(['layer'], function () { var layer = layui.layer; var imgLayer; //判断父级是否为iframe层 ...
2019-11-20 14:14:21
2391
原创 时间段判断重合
多个且双层时间段判断重合前言：需求是父级时间段不能和平级时间段重合，而每个父级里包含n个子级时间，互相之间也不能重合；1 . 样式2 . 封装函数//时间冲突比较function timeCompare(startTimes, endTimes){ var begin = startTimes.sort(); var end = endTimes.sort(); ...
2019-11-19 18:40:33
419
原创 多处使用laydate,上方限制下方时间范围
多处使用laydate,上方限制下方时间范围前言：需求是上方laydate开始与结束时间是一个范围，选定后，下方添加出的每一行数据中，都会调用laydate，但是范围不能超过上方，默认和上面时间一致，当点击上方切换时间时，下方时间同步更换；1 . 样式难点：1 . 区分每一个laydate选框；2 . 要求开始时间不能大于结束时间；3 . 点击上方时间范围下方同步更改；2 . 页...
2019-11-18 18:44:59
386
原创 AJAX（原生JS封装）
封装代码：function ajax({url,type,data,dataType}){ return new Promise(function(open,err){ //1. 创建xhr对象 var xhr=new XMLHttpRequest(); //2.绑定监听事件 xhr.onreadystatechange=function(){ if(xhr.readyS...
2019-10-24 09:27:34
123
原创 前端校验手机号格式
前言：验证手机号格式，11位/回车触发查询1 . 具体效果：2 . js代码：//回车执行查询$('#mobile').bind('keyup', function (event) { if (event.keyCode == "13") { $('#customerSearch').click(); }});// 输入11位自动触发查询$("#m...
2019-10-08 10:41:01
2266
原创 动态表格指定列合并单元格
动态渲染表格数据“指定列数据相同时合并单元格”前言：渲染数据动态创建表格，指定列数据相同时，进行合并（合并信息列与名字列，每个人下面抛出合计列）；1 . 具体表格样式:2 . html代码：<div id="content" class="courseReport-table"></div>3 . js代码：<script type="text/jav...
2019-09-18 17:28:44
460
原创 分页插件(jquery.pagination.js)简单案例
分页插件(jquery.pagination.js)前言：开发中需要展示数据操作记录，但数量是未知的，使用该插件，实现分页切换页码的功能；1 . 使用：//引入文件（先引入jQuery，再引入pagination组件）<script src="jquery.js"></script><script src="jquery.pagination.js">...
2019-09-18 14:39:25
829
原创 自定义结构-Tab切换
自定义结构-Tab切换前言：在搭建页面的时候，可能会需要多块区域进行tab切换，这时候需要规范化封装一个结构，只需要一段js,可重复且多处使用；1 . tab样式2 . js代码$(function(){ $('.hover_change').on('mouseenter', 'li', function () { $(this).addClass('active'...
2019-09-04 14:58:23
157
原创 easyui表格行内编辑
1 . html代码： <table id="IR_table" class="easyui-datagrid"></table>2 . js代码：$('#IR_table').datagrid({ view: detailview, border: true, fit: true, collapsible: true,...
2019-08-14 15:49:26
500
原创 图片加载失败后---加载默认图片
一 . 图片加载失败原因：文件路径不正确；标签属性等元素错误；错误的文件扩展名文件丢失存放位置出现问题网络传输问题；二 . 加载失败后页面默认样式 如下 ↓：三 . 封装函数：图片加载后，显示自定义图片：// 图片加载失败后---加载默认图片// img class名：load-space-img // 调用方式：img标签内调用 οnerrοr="getdefault...
2019-08-09 11:45:35
1013
原创 自定义easyui默认Loading及数据为空提示
1 . 添加Loading遮罩层：默认Loading效果较简单，想要改变时，需要自定义Loading；2 . 自定义Loading：//基本配置中定义//无数据时显示的提示信息var emptyHtml = '<div class="empty-data"><img src="/static/common/images/sus-empty.svg" alt="" cl...
2019-08-04 18:02:46
362
原创 select onchange事件，再次选中相同选项无法触发
前言：下拉框触发onchange事件，当再次点击选项时，没有改变无法触发；示例如下 ↓代码如下 ↓// 下拉框切换$(document).on('change', '.operation', function () { // ...... $(this).blur(); }) $(document)....
2019-08-01 19:50:55
3176
原创 easyui表格基本配置封装
当项目中大量引用easyui，表格的基本配置显得重复且冗余；// easyui表格配置// pageSize 页码(数值类型)，pageList页大小(数组);// 调用时不传参数，为默认值;function easyuiDefaultConfig(pageSize = 20,pageList = [20,40,60]){ //数据为空的样式提示 var emptyHtml = ...
2019-07-26 11:25:32
155
原创 ajax 请求大量数据 --- 更快捷的渲染数据方式；
ajax 请求大量数据 — 更快捷的渲染数据方式；前言：当下前端各大框架盛行，极大地提高了开发的效率，但仍旧不会有ajax请求数据大量的数据的时候，这时需要我们发现共性，方便快捷的渲染数据；当数据结构 如下↓data: [ user：[ {uid:'1,uname:'XXX'',age:20,sex:0}, {uid:'2,uname:'XXX'',age:25,sex:1}, ...
2019-07-18 18:15:41
930
原创 EasyUI Datebox 日期框 --- 选择日期范围
EasyUI Datebox 日期框 — 选择日期范围前言：当需要两个日期选择框，选择的日期是一个范围，类似“2019-7-4 - 2019-7-31”时，会需要选择后面时间时不能小于前面的时间，当小于时，自动清空并提示。1.原始样式：HTML代码如下：js代码进行判断：注，底部添加一个“清空”的按钮，使日期的选择更为方便：修改后的样式：以上基本实现，当后面日期小于前...
2019-07-04 11:38:49
1722
原创 layui时间选择器---去除秒列
layui时间选择器—去除秒列前言：layui开发文档中介绍的时间选择器包含了时，分，秒的选择，在实际开发过程中，我们选择时间可能不需要精确到秒。原始结构：1、HTML页面引入layui.js文件2、HTML文件中添加如下代码：3、在js文件中添加如下代码：注：由于页面宽度不够，或引入多个时间相关选择器可能会出现点击闪现后消失的情况，所以使用click弹出，可以避免问题的出现...
2019-07-04 10:54:39
2201
5
原创 phpcms thumb缩略图调用图片失真的解决方法
thumb()函数用于缩放图片，问题起源于调用方式缺少参数，当原图大小与缩略图比例不一致会出现图片失真错位的问题，其表现形式为：string thumb( string $imgurl, [int $width = 100], [int $height = 100], [int $autocut = 1], [string $smallpic = 'images/nopic_small.gi...
2019-06-06 14:21:40
1007
原创 PHPCMS标题设置
phpcms v9的SEO首页和栏目页以及内容页都是可以独立配置，SEO代码在不同页面有不同意思以及不同的使用方法：优先级介绍：内容SEO > 栏目SEO > 站点SEO首页：:如果后台配置了站点SEO，则显示“SEO站点标题”，否则显示“站点名”栏目页：如果配置了栏目SEO（即栏目标题），那么栏目标题将显示为“栏目标题 -SEO站点标题或站点名”，否则显示为“栏目...
2019-06-03 18:54:32
422
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人