js
IF_YOU_Qian
记录工作中遇到的小问题,错误的地方欢迎指导。
展开
-
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 · 190 阅读 · 0 评论 -
瀑布流&下拉加载
瀑布流结合列表下拉加载动画过渡展示前言:需求默认瀑布流展示列表,下拉加载的时候看到列表顺序过渡加载;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 · 581 阅读 · 0 评论 -
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 · 1557 阅读 · 0 评论 -
自适应图片高度轮播
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 · 536 阅读 · 0 评论 -
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 · 1558 阅读 · 0 评论 -
腾讯云批量上传文件(前端)
腾讯云批量上传文件(前端)前言: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 · 1925 阅读 · 0 评论 -
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 · 2056 阅读 · 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 · 742 阅读 · 0 评论 -
点击图片查看原图(图片按比例展示,点击旋转)
使用layer弹框:实现点击图片查看原图的效果;引入layer,函数封装:// 点击图片查看大图function showImage(imgDom) { layui.use(['layer'], function () { var layer = layui.layer; var imgLayer; //判断父级是否为iframe层 ...原创 2019-11-20 14:14:21 · 2468 阅读 · 0 评论 -
时间段判断重合
多个且双层时间段判断重合前言:需求是父级时间段不能和平级时间段重合,而每个父级里包含n个子级时间,互相之间也不能重合;1 . 样式2 . 封装函数//时间冲突比较function timeCompare(startTimes, endTimes){ var begin = startTimes.sort(); var end = endTimes.sort(); ...原创 2019-11-19 18:40:33 · 450 阅读 · 0 评论 -
多处使用laydate,上方限制下方时间范围
多处使用laydate,上方限制下方时间范围前言:需求是上方laydate开始与结束时间是一个范围,选定后,下方添加出的每一行数据中,都会调用laydate,但是范围不能超过上方,默认和上面时间一致,当点击上方切换时间时,下方时间同步更换;1 . 样式难点:1 . 区分每一个laydate选框;2 . 要求开始时间不能大于结束时间;3 . 点击上方时间范围下方同步更改;2 . 页...原创 2019-11-18 18:44:59 · 464 阅读 · 0 评论 -
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 · 147 阅读 · 0 评论 -
前端校验手机号格式
前言:验证手机号格式,11位/回车触发查询1 . 具体效果:2 . js代码://回车执行查询$('#mobile').bind('keyup', function (event) { if (event.keyCode == "13") { $('#customerSearch').click(); }});// 输入11位自动触发查询$("#m...原创 2019-10-08 10:41:01 · 2335 阅读 · 0 评论 -
动态表格指定列合并单元格
动态渲染表格数据“指定列数据相同时合并单元格”前言:渲染数据动态创建表格,指定列数据相同时,进行合并(合并信息列与名字列,每个人下面抛出合计列);1 . 具体表格样式:2 . html代码:<div id="content" class="courseReport-table"></div>3 . js代码:<script type="text/jav...原创 2019-09-18 17:28:44 · 500 阅读 · 0 评论 -
分页插件(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 · 880 阅读 · 0 评论 -
点击按钮下载Excel表格
网页点击按钮,下载Excel表格到本地原创 2019-08-12 16:21:25 · 889 阅读 · 0 评论 -
图片加载失败后---加载默认图片
一 . 图片加载失败原因:文件路径不正确;标签属性等元素错误;错误的文件扩展名文件丢失存放位置出现问题网络传输问题;二 . 加载失败后页面默认样式 如下 ↓:三 . 封装函数:图片加载后,显示自定义图片:// 图片加载失败后---加载默认图片// img class名:load-space-img // 调用方式:img标签内调用 οnerrοr="getdefault...原创 2019-08-09 11:45:35 · 1073 阅读 · 0 评论