阿门阿窗一颗葡萄树

原创 vue 封装图形验证码 纯前端图形验证码 校验

简单好用 自由度高的图形验证码。

原创 vue设置懒加载图片出错时的替代图片跟loading时的图片 lazyload

在main.js引入的时候设置import imgError from "./assets/imgs/noimg.png";import imgLoading from "./assets/imgs/loading.gif";Vue.use(Lazyload, { preLoad: 1.3, //距离当前dom距离页面底部的高度 error: imgError, // 图片加载异常时，注意开发过程中如果图片放置在assets目录下，图片资源需要使用require()的方式路径引

原创 iconfont 图标 用css设置渐变颜色

//用背景图片的方式设置渐变方向跟颜色background-image: -webkit-linear-gradient(left bottom, #0AA77A, #5CFE9D);//设置绘制的路径是文字-webkit-background-clip: text;//设置文字颜色透明color:transparent;

原创 vuecli 配置自动css兼容 自动px转rem适配

安装postcss-pxtorem跟flexiblenpm install lib-flexible --savenpm install postcss-pxtorem --save-dev在main.js里面引入flexibleimport "lib-flexible/flexible.js";目标文件：vue.config.jscss: { loaderOptions: { postcss: { plugins: [ requi..

原创 Nodejs puppeteer 无头浏览器导出pdf

有需求，把若干个页面导出pdf并打包下载。服务器环境CentOS 7.6.1810分析需求后，决定用puppeteer进行chrome无头浏览器进行操作。之前都没有接触过这个东西，在git上找到这个包，根据提示安装了puppeteer。npm i puppeteer然后复制了导出pdf的codeconst puppeteer = require('puppeteer');(async () => { const browser = await puppeteer..

原创 js自制远程搜索建议，搜索建议，搜索关键字

html<input type="text" name="species">css.search-box { position: fixed; left: 0; top: 0; z-index: 100; background-color: #fff; width: 150px; max-height: 260px; overflow: auto; box-shadow: 0 12px 5px -10px r

原创 js/jq input输入后回车形成标签 并把所填内容传给后台（单页面可多个，互不干扰）

html部分<div class="tags"> <input type="text" class="js_inputTags" placeholder="请输入并回车" autocomplete="off"></div><input type="hidden" data-key="room" data-name="shelf" class="layui-input">css部分.tags { width: 100%;

原创 微信矩阵 微信H5引入其他微信公众号关注页面 微信公众号关注页面网址

其实就是微信公众号的历史文章页面，会有个关注功能打开任意微信公众号的任意一篇文章，在PC浏览器打开，微信浏览器不可以打开代码调试，搜索biz关键字它后面跟着的那串码复制到以下链接：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=找到的部分替换==#wechat_redirect复制到biz= 后面即可使用...

原创 js获取实时天气、温湿度

效果图通过和风天气的api获取天气跟温湿度；1、去和风天气注册账号并申请免费开发key，免费开发的key可以拿到实时温湿度、三天温湿度预告，其余的都没有权限。2、根据和风API获取你要拿的城市的id/经纬度，具体参照城市信息搜索API。3、带着拿到的城市坐标/id 以及自己的key，请求获取天气、温湿度的API，具体参照天气预报和实况API。4、注意，天气预报的接口拿不到相对湿度。5、注意，和风天气有提供各种天气icon图，点击自取，天气实况的icon对应的就是图标名称...

原创 layui table 导出xls重写之导出全部数据

首先，找到layui包里的table.js，然后格式化代码在大概115行的地方，改成然后在大概这个位置，加一个方法如图所示，可以一键导出99999999条数据，绝对够使????

原创 html + css 页面向导

效果：html:<div class="guide"> <div class="guide-item over"> <span>1</span> <p>身份认证</p> </div> <!-- /.guide-item --> <div class="guide-item on"> <span>2

原创 移动端input number maxlength 无效解决办法

<input type="number" oninput="if(value.length > 6) value = value.slice(0,6)" />

转载 从输入url到页面返回的全过程

从输入url到页面返回的全过程。1.我们输入一个域名:www.baidu.com，然后点击确认；2.浏览器查找域名的IP地址。查找过程如下:首先是浏览器缓存，浏览器会缓存DNS记录一段时间；如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用，获取系统缓存中的记录；然后是路由器缓存，路由器一般会有自己的缓存；如果前者都没有找到，就需要从本地域名服务器开始进行DNS查询了。详细的DNS查询过程我在DNS工作原理及过程中讲到过。3.现在浏览...

转载 js16进制转10进制

var ex16hex = function (value) { value = value.replace(/^\s+|\s+$/g, ""); var ex10 = document.getElementById('ex10'); if (value) { value = stripscript(value); value = value.replace("0x", ""); var arr = value.split("");.

原创 js正则去掉字符串空格

//str为要去除空格的字符串://去除所有空格:str = str.replace(/\s+/g,"");//去除两头空格:str = str.replace(/^\s+|\s+$/g,"");//去除左空格：str=str.replace( /^\s*/, '');//去除右空格：str=str.replace(/(\s*$)/g, "");

原创 微信小程序 picker date 时间 start 和 end 无效

<picker mode="date" value="{{date}}" start="{{start}}" end="{{end}}" bindchange="bindDateChange"> <view class="picker"> {{date}} {{week}} </view></picker>直接这样设置就可以了，开发者工具暂时不支持这两个属性，在真机上是有效的...

原创 微信小程序 radio checked=false

这属于微信小程序的bug，官方文档给的是这样的然而实际运用中，我的代码是这样<radio-group bindchange="radioChange"> <label> <radio value="0" checked="true"/> <text>预订单</text> </label> <label style="margin-left: 20rpx">

原创 js递归处理文字溢出缩小字体

需求是，在特定的高度盒子里，文字溢出隐藏的效果不理想，就想看全部，没得说，改呗var fontSize = function(item, size = 16) { var bh = item.outerHeight();//box高 var th = item.children().outerHeight();//文字高 if(bh - th < 0 && size > 12){ item.find('.js_textContent

转载 git版本回滚

Git回滚代码到某个commit回退命令：git reset --hard HEAD^ 回退到上个版本git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前git reset --hard commit_id 退到/进到，指定commit的哈希码（这次提交之前或之后的提交都会回滚）回滚后提交可能会失败，必须强制提交强推到远程：(可能需要解决对应分支的保护状态)git push origin HEAD --force————————————

转载 微信小程序开发---自定义动态tabBar

最近开发微信小程序，公司要求做一个类似闲鱼的tabbar，但是网上大多资料的tabbar都会在页面切换的时候重新渲染，所以我写了一个不会重新渲染的tabbar，有需要的直接拿走不谢。https://github.com/SuRuiGit/wxapp-customTabbar使用步骤如下：第一步：找到项目中的tabbarComponent目录，拷贝到你的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片第二步：到app.json中配置tabBar，这里我

原创 微信小程序报错: thirdScriptError

微信小程序报错VM1305:1 thirdScriptErrorCannot read property 'name' of undefinedTypeError: Cannot read property 'name' of undefined at z (http://127.0.0.1:38175/appservice/__dev__/WAService.js:2:1560728) at Ie (http://127.0.0.1:38175/appservice/__dev_

原创 js随机生成指定位数的字母数字组合字符串，可选择字母大小写

var a = "";var string = function(len){ len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1 var maxPos = $chars.length; var pwd = ''; var num = ''; for (i = 0; i < .

原创 js 只能输入小数点跟数字

$(document).on('keyup','.numDecText',function(){ $(this).val($(this).val().replace(/[^0-9.]/g,''));}).bind("paste",function(){ //CTR+V事件处理 $(this).val($(this).val().replace(/[^0-9.]/g,''));}).css("ime-mode", "disabled"); //CSS设置输入法不可用...

原创 css 修改input提示文字颜色

input:-moz-placeholder,textarea:-moz-placeholder { color: #fff;}input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #fff;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #fff ;}

原创 css loading效果

html :<div class="bouncing-loader"> <div></div> <div></div> <div></div></div>css:@keyframes bouncing-loader { to { opacity: 0.1; transform: translate3d(0, -1rem, 0); }}.bouncing-l

原创 js 浏览器语音播报

var utterThis = new window.SpeechSynthesisUtterance('支付宝到账，323324234');window.speechSynthesis.speak(utterThis);

原创 js操作浏览器cookie

//JS操作cookies方法!//写cookiesfunction setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}//读取cooki.

原创 js 百度地图第一次初始化标的位置不对，解决方案

// 百度地图API功能var map = new BMap.Map("map");var point = new BMap.Point(121.624667,31.1010096);var marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE);map.centerAndZoom(po.

原创 css after/before content 计数器

此为倒序，正序去掉counter-increment的-1即可

原创 好看的css阴影效果

border: none;box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);-webkit-box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);border-radius: 5px;

原创 js控制一行最多放多少文字，并把多余的放到第二行，同时可以手动调整每行放多少字

初始效果是这样的，是通过下面这段代码切割了整个字符串，分别放到两个盒子里 var sub = function (str, n) { var r = /[^\x00-\xff]/g; if (str.replace(r, "mm").length <= n) { return str; } var m = Math.floor(n / 2); for (var i = m; i < str.length; i++) {..

转载 打印页面时候的物理px，即windh跟height分别设为多少打印出来的合适

计算方式一般的分辨率为XX像素/英寸，其中一英寸为25.4毫米。所以一毫米的像素数就为XX/25.4。现在的工作就是求XX的值了，把XX的值求出来以后，直接用XX/25.4*210就得到A4纸的像素宽了。A4纸的尺寸是210mm×297mm。分辨率是72像素/英寸时，A4纸的尺寸的图像的像素是595×842（推荐用这个大小比例）。分辨率是150像素/英寸时，A4纸的尺寸的图像的像素是1240×1754。分辨率是300像素/英寸时，A4纸的尺寸的图像的像素是2479×3508。...

原创 微信公众号H5页面支付

首先接入微信jssdk<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>然后设置你的wx.config()直接上支付代码：function checkOrder(orderNo) { layer.open({ type: 2 ,content: '支付结果查询中' ,shadeClose: false });

原创 MAC版印象笔记误删回收箱如何找回

我的印象笔记版本按住键盘option键的同时，点击帮助 - 解决疑难- 打开本地数据库然后找到这个目录可以点png文件预览内容，还可以把.enml文件改成.html，在浏览器中打开预览笔记

原创 js所有文件加载完后再开放页面+ajax获取本地文件提示跨域

一般做移动端动画类的页面（也称H5）的时候，我们会用到大量的图片，还很有可能会有背景音乐甚至视频，如果网速不好或者文件过多过大，就会出现问题，这种情况下我们就可以使用js代码，达到文件全部加载完再展示正式页面的效果。那么在实际项目中，我们肯定免不了用背景图片的情况（如果有全部用img标签做的大神，勿喷），那么怎么保证我们的每一个静态文件都参与到我们的loading文件数中呢？我们需要单独写一个json的文件来解决我们的问题，例如：这里插播一条知识点，我的json文件为什么会用stati...

原创 js阻止移动端下拉滑动效果

document.body.addEventListener('touchmove', function (e) { e.preventDefault(); // 阻止默认的处理方式 即 下拉滑动效果}, { passive: false});

原创 web端 m3u8播放器

m3u8文件介绍，请看m3u8文件格式详解m3u8播放器git地址，点击获取这个就是git上下载下来的文件目录，浏览器打开外面的index.htm，input里输入你的.m3u8文件的地址，点击play，就会跳转到player下面的index.html里，实现播放我的做法是，直接提取player里面的文件放到自己的项目目录，然后在进入这个链接的时候，直接在浏览器url上加 # + .m3u8地址ps：在浏览器看的时候，可能会报错：player.js:11 Uncaught (..

原创 UEditor代码高亮（适用于所有的富文本编辑器）

最近在写项目管理的时候，领导提出可以贴代码的需求，贴代码，自然就需要代码高亮；关于为什么选用UEditor，虽然这款百度出品的所见即所得编辑器已经很久没有更新了，但是现有的功能还是足够用的；第二点是UEditor的文档无比详细，而且中文对于国人来讲还是比CK之类的英文文档来的友好；第三点是个人觉得UEditor用起来比CK要方便一些。话不多说，大家一起来看一下：首先这边讲一下两种代码高亮方法；第一种是UE自带的shCore//接入css<link rel="styles

转载 MAC升级node跟npm到最新版

第一步，先查看本机node.js版本：node -v第二步，清除node.js的cache：sudo npm cache clean -f第三步，安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"sudo npm install -g n第四步，安装最新版本的node.jssudo n stab...

原创 vue cli路由守卫