自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

欢迎来到冲哥的博客

想要一览众山小,就得有爬上山顶的决心和爬山的坚持,两者缺一不可!

  • 博客(619)
  • 资源 (6)
  • 论坛 (1)
  • 收藏
  • 关注

原创 前端,js 生成二维码 ,使用jquery插件快速生成二维码

有的时候 需要前端来生成二维码 然后让用户扫描使用我们这次用的就是 jquery的一个qrcode插件库QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库依赖jquery<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <scr

2021-02-25 16:26:32 4

原创 前端一套代码同时在 pc 和 手机端展示不同的效果,思路分析, css媒体查询

如果你在公司中碰见这样的需求,用过bootstrap的童鞋 肯定上来会想到 boot如果一套代码 在 同一个域名下 同时能在手机和移动端运行 让客户看到一样的内容 不一样的效果1. 如果页面复杂的话一套代码两个样式 判断用户在那种设备中打开的然后跳转到指定的 网站类型上就像百度那样 有两个网站m.baidu.com // 是手机站www.baidu.com // 是pc站2. 如果页面简单地话 可以使用 css3 的媒体查询<me...

2021-02-25 14:48:42 8

原创 position:sticky; 粘性定位 入门级别

说实在用到粘性定位的地方肯定有 但是不多, 在讲解之前小看个小效果就上面图中的那种效果 让你写 如果用js的话怎么写就是判断根据用户滚动的高度 把元素的位置移动一下 但是 js代码写起来是不是 好像还是有点多的吧但是使用粘性定位就很简单了 粘性定位可以用在类似上面的那种业务需求中在每一个元素上面 加两行样式代码就搞定了position: sticky;top: 0;好了步入正题了粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后...

2021-02-24 15:56:38 12

原创 bootstrap4 控制元素在不同尺寸的设备中 显示、隐藏

这几天接到了一个响应式项目 要求同一套代码能在pc和手机端 展示 不同的效果很简单的一个项目 但是pc上面显示的东西会比较多 但是移动端就很简单了 这个时候就需要隐藏一些元素了首先boot4 中 隐藏和显示 元素是 d-none / d-block根据不同尺寸 可以设置d-sm-none 在小屏幕及以上屏幕都隐藏d-md-none 在中屏幕和大屏幕上都隐藏d-lg-none 只在大屏幕的时候隐藏同样d-sm-block 在...

2021-02-24 14:05:34 10

原创 手机h5 页面扫码上传图片 同步显示到pc端

还是那句老话 一切技术为公司业务服务!这不这天产品又来新思路了,小赵啊,我们的客户不想每次上传图片还得跑到电脑上传,能不能手机扫码 ,在手机上拍照点击上传 就自动显示到pc上了我说可以啊,用户扫码之后跳到一个 h5 页面 用户在那个页面拍照 成功之后 点击上传就到我们的系统中了问题是 现在后端是用php写的 我当时想到了两种方式 一个是ajax轮询 但是吧那个代价好像有点大 也比较耗费客户端的性能 想了想还是算了第二种就是 使用websocket ,那样的话 需要后端搭建...

2021-02-23 16:44:03 27

原创 koa 上传文件 附代码

const Koa=require('koa');const cors=require('koa2-cors');const koaBodyParser=require('koa-bodyparser');const KoaRouter=require('koa-router');const fs=require('fs'); // 文件读写const koaBody=require('koa-body');const koaParty=require('koa2-multiparty');.

2021-02-23 11:07:30 15

原创 layui 监听单元格点击事件,获取当前点击单元格的内容以及 所在的表头内容

特别是后台的一些管理系统中 业务中还是会碰见这样的需求呢 如果你的后台使用layui写的话 在表格中layui 也给我们提供了监听单元格的事件 但是好像不能直接获取到单元格内容个 和 对应的表头其实 还是可以解决 换个角度使劲就会发现新的世界 不是吗event: 'username' 在每个表头中加一个 event 属性 这样就可以监听表头事件 记住个 event 和 当前列的字段最好保持一样table.render({ e...

2021-02-22 14:37:17 54

原创 js 判断浏览器滚动触底 操作,并触发加载框

这个其实在移动端浏览器用的还是比较多的我这边引入了一个jquery 来少写一些代码 偷个懒其实触底 就是判断用户滚动的距离 加上屏幕的 高度 等于 文档document的总高度的话 那就是到底部了html代码<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> * { ...

2021-02-20 16:29:10 10

原创 在vscode 中使用git,不用敲命令,只有大佬才用命令

刚入职一个新的前端同事 ,每次提交代码还是使用 大佬级别的操作,就是敲命令,我很佩服从心理很佩服,当时 我就是记不住那么多命令,也是懒吧 就投机取巧 使用过小乌龟 sourcetree的一个git 可视化工具很多前端童鞋 可能会有疑问 我们直接vscode中的git工具不好吗 其实也挺好的1. 今天来讲解下 在vscode 中使用git工具 VS c#的开发人员的开发工具好像也叫作vs好了闲话不多说了git 的配置 啥的我就不多说了哈 基础前奏的工具就不多说了...

2021-02-20 13:23:38 108 2

原创 layui 给多个按钮绑定 文件上传事件

正常来说吧 一般上传的接口 应该都是同一个 但是可能有三个上传按钮 还是有这种业务的存在的这个时候 我们绑定上传控件其实会有一些小伙伴 不会注意到 layui人家是支持 根据类名实例化上传对象的 还是闲着没事多看看文档比较好的<button class="layui-btn layui-btn-radius layui-btn-primary" data-id="picture" id="picture" data-type="picture">上传图片&lt...

2021-02-18 14:39:14 87

原创 js中 去掉小数点后面的数字

其实这个根据正则判断下就行了 先把数字转换成 字符串var str = Number(str).replace(/\.\d+/g, '');最后再转换成数字 就行了 关注我 持续更新前端知识

2021-02-18 11:39:23 105

原创 pre 标签 中文字太长 不换行 怎么办

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre { white-space: pre-wrap;}关注我 持续更新前端知识

2021-02-09 11:18:27 38

原创 pc端鼠标拖拽元素,鼠标移动太快,导致元素跟不上的问题

可以把移动的监听事件 放到 window对象上 监听整个窗口事件 就可以了然后将window对象中鼠标的移动位置 坐标赋值给 指定元素 就可以了<div class="drag"></div> <script> var tuo = function(e) { var x = e.clientX; var y = e.clientY; $('.drag').css(..

2021-02-08 17:53:48 50

原创 js 监听浏览器 返回上一级页面 的事件

$(window).on('popstate', function () { console.log('返回了上一级页面') });关注我 持续更新前端知识

2021-02-07 13:59:57 56

原创 原生h5 怎么监听用户 在浏览器中 触发的返回事件,全面屏手机 侧滑退出的情况,不退出浏览器,重新回到当前页面

产品提来的一个需求 ,最近曲面屏手机比较火,用户的行为不想点击 叉号了,想左滑 或者右滑动 退出一个东西刚听到这个消息的时候, 首先想到不太可能, 我就问产品在哪里看到的这个效果 退出是人家手机系统的功能呢 我怎么去监控呢然后产品 就给我发了下 一个视频 (我是用谷歌模拟的,用户返回的)额 我就没话说了 我说 让我试试看吧这个时候 我就没法反驳了 首先问了问安卓和苹果的童鞋 我们的h5是做不到, 直接监听人家的返回行为那是显然不行的那这样就没办法...

2021-02-07 13:57:10 56

原创 原生js 实现 文字向上翻动 效果, jquery效果实现的总是在一段时间后 速度变快

https://blog.csdn.net/yunchong_zhao/article/details/106387004 之前曾经用jquery 做过一个类似的 但是 随着时间的进行 发动翻动的速度越来越快 不是我想要的 因为是业务需要 肯定不能越来越快 这个是bug的可能jquey 加上定时器 之间的异步执行 时间上出现的差错 导致 原来越快 总是跟预定的时间 不一定 一会快一会慢的 的不管是用 setInterval 还是 setTimeout 甚至是 requ...

2021-02-07 10:05:02 48

原创 js 原生获取一个 dom元素的 样式属性

就是 如果让你原生js的方式获取下 一个dom元素的 文本颜色值的话 乍一听可能还不好说出来 但感觉 还是很熟悉对吧方法就是 getComputedStyle举个例子 看看吧#app { height: 200px; } <div id="app"></div>我给一个div 设置了 高度200px然后 我就去获取下 那个高度的 值console.log( window.getCompu...

2021-02-07 09:43:18 65

原创 js 原生删除一个dom元素

哎 jquery用惯了 可能突然用原生一下子可能想不起来了 这个时候是不是很尴尬哈 jquery 简单 直接在元素上 remove 就可以了原生删除的方法是 el1.removeChild(el2); // 往往 el1 是 el2的父节点哈好像没有自己删除自己的方法 如果一个元素想自己删除自己的话那就通过父节点来删除吧比如 : el.parentNode.removeChild(el);关注我 持续更新前端知识...

2021-02-07 09:36:40 77

原创 uniapp 中 对nvue文件的 元素css样式的 设置问题

要在地图上搞一个输入框,我们肯定呀稍微修改下 输入框的样式这个时候 由于我们的地图是 原生组件 层级最高 所以就用subNvue 来实现 在地图上覆盖组件的功能这个时候设置样式上出了点问题<template> <div> <input class="input" type="text" value="hello world" /> </div></template><script> export def..

2021-02-03 15:18:38 123

原创 根据真实手机号字段, js 正则判断手机号格式是否正确

最近出来个 bug,用户反馈填写自己的手机号 你们公司网站竟然给我 报格式不正确 这个就纳闷了当时 让客户吧手机号发过来 看下 确实 网站把人家手机号 给pass了 原来是 用户用的是 198 开头的手机号 我们确实过滤掉了 这个号段那这样问题就来了 天天说按照手机号 匹配正确格式 但起码你得大概知道 三大运营商的号段吧中国联通:186、185、176、175、166、156、155、146、145、132、131、130。中国移动:134、135、136、137、138...

2021-02-02 11:28:57 63

原创 百度地图,支持关键字地图检索位置,返回检索地址的坐标

搜索位置功能在地图上还是 很常见的但有个前提 得知道你的百度地图是 gl版本的 还是BMap的版本的<scripttype="text/javascript"src="//api.map.baidu.com/api?type=webgl&v=2.0&ak=你的秘钥“></script><scripttype="text/javascript"src="//api.map.baidu.com/api?v=2.0&ak=你的秘钥">...

2021-02-01 11:11:39 40 1

原创 layui 图片预览放大,点击那张放大那张图片

这个layui的layer的组件自带的功能layer.photos({ photos: json ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) });这个json 就是一个存储图片的格式 我们得按照它规定的格式 存入到json中json的格式如下{ "title": "", //相册标题 "id": 123, //相册id "start": 0, //初始显示的图片序号,默认0 ...

2021-01-30 12:53:07 40

原创 js中匹配两个字符中间的任意字符,以及查找字符在字符串中最后一次出现位置的下标

其实操作字符串也是 前端工作者 经常会在工作中碰见的1. 匹配两个字符 中间的任意字符打个比方吧 [hello,world] 取两个括号中间的hello worldvar str = [hello,world];subStr = str.match(/[(\S*)]/)[1];2. 查找字符在字符串中最后一次出现的位置 其实这个就是个原生有的api 叫做 lastIndexOf然后也是举一个例子吧var str = "aaaaaabcccbdd";console....

2021-01-27 11:39:15 55

原创 触发layui的表单提交事件,我提交一次之后 第二次就没反应了

其实工作中还是比较常见这样的需求呢监听submit提交 首先在layui中监听表单提交事件form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象 console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value

2021-01-26 11:44:21 55 1

原创 css实现遮罩层高斯模糊,毛玻璃效果

突然设计搞了一种想法,当遮罩层谈起来的时候,能不能搞一种模糊让用户看不清遮罩层下面的内容然后ui小姐姐说,要是做不出来 就不做了,我说能做出来,怎么能让ui小姐姐看不起呢先看下 加模糊滤镜之前的效果然后加上模糊滤镜之后的效果呢是不是很不一样呢其实滤镜这个东西很多前端小伙伴都知道这个东西filter 属性 则是 blur 单位是 px 其实上面的我设置了 5px 都很模糊了都知道这个东西 但是 一次性就加成功 可能有点困难哈<section>...

2021-01-25 17:57:12 235 1

原创 css 中弹性布局,子元素的内部文字宽度超过子元素宽度引起布局出现横向滚动条

我当时是因为在子元素中有 一段文字 子元素是继承父元素宽度的 33.33% 等于说三个子元素均分父元素但是由于文字过长 导致出现了横向滚动条 布局就错乱了解决方法子元素 加上flex-basis: 33.33%;width: 0;...

2021-01-25 14:57:09 69

原创 使用swiper实现移动端 h5页面 图片预览放大,轮播功能

相信在手机端的图片预览的功能还是很多的 特别是新闻类网站,在移动端几乎都需要图片放大预览如果纯远程写出来的话 可能会花费你不少时间 而且各种细节还得处理 不如直接使用大神写好的插件来的话已经存在很成熟的轮子,就不要去造重复的了。直接引入使用swiper 轮播插件 是支持图片放大功能的<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> <link rel="styl...

2021-01-24 16:23:02 74

原创 js 通过正则匹配 去掉 多余的空格 和换行

其实这种情况还是有可能出现在 textarea 文本输入域 当你需要限制文本输入内容长度,无可避免要排除 空格 和 换行的js中有直接 去掉 左右空格的方法 trimstr = str.replace(/\s+/g, ""); // 去掉空格str = str.zHousedesc.replace(/[\r\n]/g, ""); // 去掉换行关注我 持续更新前端知识 ...

2021-01-21 14:23:49 124

原创 css 实现 图片左右滑动查看的效果

其实除了除了轮播图的那种图片效果外,图片滑动查看的效果 在网站中引用也是很多的,特别是在移动端,pc端的也有 就是我们是通过鼠标点击滑动的效果我们先来看下效果吧这样的效果 其实没必要用到js 直接用纯css就能实现思路大概是 父元素 包括一个子元素 然后 如果高度和子元素高度不一致的话 还得再竖向方向上设置一个 hidden然后里面 子元素 要设置一个比较长的 宽度父元素 设置 overflow-x : auto; 就可以了我们看下代码实现吧dom布局...

2021-01-21 10:23:20 126

原创 deno 初体验,了不起的deno!

至于deno的背景故事我就不在这里一一赘述了 稍微点个一两句吧大致就是 node的作者 搞出node之后 然后就去研究别的去了,吧node交给他人维护了,后来node也越来越火了,但node的发展却朝着一个不是原作者的意愿的一个方向前进着。每个node项目大多伴随着 庞大的node_modules 包 各种依赖 让一些初学者 可能苦不堪言现在大厂基本很多实用node 作为BFC 中间层渲染 , node要说被deno替换掉 至少最近几年是不太可能的deno 其实也是 一个js 的运行环...

2021-01-20 15:50:34 118

原创 移动端h5页面,网页突然在部分手机浏览器中,打开内容为空,样式和js都执行了,但内容就是为空

也就前天 突然接收到 用户的反馈 说网页无法打开了上午 我立即去排查 好像在部分的手机的浏览器中确实内容为空然后在pc端上模拟 手机的时候 尤其是谷歌 偶尔会出现 一直 开启 debugger 很难受但是火狐是正常 我看了页面 和接口 都是正常的 也不是缓存的问题后来以为是缓存的问题 但是清理缓存 也是那样然后继续排查 是不是语法的问题 但还是很快被排除 如果是语法的问题 的话 以前也应该不能访问呢 所以这个也被排除了后续以为是 域名...

2021-01-15 17:42:07 60

原创 layui的图片预览 鼠标滚动无法放大了

同样的代码 突然失效了 。 当时也算找了一会最后发现 原来是 layui版本的问题好像支持鼠标放大的 至少是 2.5.4 版本后来更新了版本可以了

2021-01-15 17:32:17 48

原创 layui 表格中如何实现根据行索引显示 当前行的 id值

其实正常的话 ,可能我们在表格中第一行可能是按数据库中 的id进行展示的但那样的话 可能新增的数据 id可能比较大 然后在上面排着 有点别扭 哈这样 产品 就会让我们前端码农更改下 哎 苦逼的生活这个时候我们可以采用 layui 表格中的自定义木板的方式进行过解决哈return d.LAY_INDEX; 其实关键的就是 这句话 然后就把当前行的索引 返回 出来了table.render({ cols: [[ {field:'id', titl...

2021-01-12 09:50:41 107

原创 百度地图,开启marker点拖拽,并监听拖拽后的坐标位置

有的网站可能让用户自己移动marker点选择位置 这个时候 需要就来了开启marker点的拖拽还是很简单的哈其实开启拖拽的也是 BMapGL 版本的地图 这点要记住哈 var marker = new BMapGL.Marker(point, { enableDragging: true }); map.addOverlay(marker);然后就是监听 marker点拖拽的事件 有的小伙伴可能去找 百度看看有没有相关的api啥的 其...

2021-01-10 17:44:34 140 1

原创 百度地图添加文本标记

添加文本标记 还是很有用处的 用来给我们的地图上进行标记 然后给用户一些提示啥的这个百度直接给我 封装好了 api 直接调用就显示出来了 官网介绍也很清晰 我在自己的博客中保存一份然后 方便以后查看 嘻嘻不过记住引入的是js GL 版本的百度地图 <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> 如果你的地图上面没有 type=web...

2021-01-10 17:36:13 105

原创 layui 中的layer弹出层 使用iframe 引用本地路径的html 文件

这个相对来说还是比较简单的 但是也有一点小坑 一般来说 我们写的比较少的可能 直接会在页面中 声明一个div进行 展示但是 如果弹出层的页面比较复杂的话 可以直接 搞一个html 使用iframe的形式进行引入假设 我们的本地 有一个demo.html 和我们的正在使用的html中 在同一级目录下 的话记住 type 类型是 2 是数字 别用引号包括啊 同样的 content 的路径 要加 ./ 直接/ 他可能也找不到layer.open({ ...

2021-01-09 16:32:55 119

原创 js 中匹配任意字符,不得小于多少个

\s 则表示匹配 空白字符\S 则表示匹配非空白字符 这样的话 就包括 字母 数字 和下划线了那么匹配至少 30个字符的 正则怎么写呢var reg = /^[\S]{30,}$/记住 {30, } 这样是错误的 {30,} // 这样是对的30逗号 后面 不能加空格 直接跟着 否则就会报 匹配不到 这个也算个小细节问题吧关注我 持续更新前端知识...

2021-01-09 09:47:19 58

原创 js中怎么将数组传递给后端,后端只接受json格式的数据?

var arr = [1, 2 , 3, 4];数组接受不了 字符串总能接受吧将数组转换成 字符串 传给后端 传过去之后 让后端 自己分割 取出自己需要的参数就行了 换种方法就解决 var data = arr.join('-');关注我 持续更新前端知识...

2021-01-08 14:48:42 60

原创 js中找到字符串最后一个字符并去除掉

第一种方式 使用字符串的 replace方法var str = "hello-world-" // \S 非空白字符 $结尾 {1} 匹配一个 str = str.replace(/\S{1}$/, ''); console.log(str);第二种是使用字符串截取的方式 字符串截取有三种api 我这里只讲解俩种哈var str = "hello-world-" console.log(str.slice(0, -1.

2021-01-08 14:45:03 62

原创 layui 中 给 select下拉框添加选项( 赋值)

在layui中如果是给 input输入框赋值的话 那么 直接就可以 通过 form.val() 的方式赋值但是吧 select下拉框还是有点奇怪的 他可不能那样赋值 有些刚用layui 比如博主这样的菜鸟 还就是那样做的 哈哈哈给 select 元素绑定一个 id 一会用来添加元素<div class="layui-form"> <div class="layui-form-item"> <labe...

2021-01-08 13:32:42 490

西游记四个小人物走动,css3的知识 有兴趣的童鞋参考.rar

css3中的动画特性,形成人物走动特效,感兴趣的童鞋可以学下,很简单的

2019-10-21

html5新特性canvas绘制弹幕

用js封装的弹幕函数,里面有构造函数,用html5的新特性,同时是参考bilili写的,感兴趣的同学可以参考下

2019-10-14

jiuxian.zip

完成一个静态的页面,用html+css完成的一个电商界面,jquery完成一些特效.可以作为大学毕设设计参考页面,为需要的同学提供一点帮助吧

2020-02-06

基于PHP+MYSQL的电子商务系统有前后台和数据库(没有tp框架知识的慎重下载).rar

数据库我用的是mysql,能实现基本的功能,商品的展示,加入购物车,结算,也有后台管理系统,管理数据库里面的数据,很适合新手参考学习

2019-10-22

jsonToExcel.rar

由于工作需要 将后端返回的数据 选出有效的数据 用户点击下载 可以导出为excel表格形式 可用户看

2019-12-06

轮播图资源,有需要的同学可以下载参考下.rar

不需要下载jquery,我使用的是cdn,直接更换图片地址,就可以使用了。中间的有些注释是按照我自己的意思写的可能有的地方有些欠缺,

2019-09-17

有大佬安装cordova 碰见过下面的问题嘛

发表于 2020-08-18 最后回复 2020-08-18

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除