- 博客(45)
- 问答 (1)
- 收藏
- 关注
原创 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()的方式路径引
2020-11-12 10:47:08
401
原创 iconfont 图标 用css设置渐变颜色
//用背景图片的方式设置渐变方向跟颜色background-image: -webkit-linear-gradient(left bottom, #0AA77A, #5CFE9D);//设置绘制的路径是文字-webkit-background-clip: text;//设置文字颜色透明color:transparent;
2020-10-29 17:04:12
2294
原创 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..
2020-10-29 11:20:28
270
原创 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..
2020-10-21 10:50:58
1035
原创 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
2020-10-11 11:50:30
279
原创 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%;
2020-10-11 11:40:12
638
原创 微信矩阵 微信H5引入其他微信公众号关注页面 微信公众号关注页面网址
其实就是微信公众号的历史文章页面,会有个关注功能打开任意微信公众号的任意一篇文章,在PC浏览器打开,微信浏览器不可以打开代码调试,搜索biz关键字它后面跟着的那串码复制到以下链接:https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=找到的部分替换==#wechat_redirect复制到biz= 后面即可使用...
2020-09-29 15:33:19
428
原创 js获取实时天气、温湿度
效果图通过和风天气的api获取天气跟温湿度;1、去和风天气注册账号并申请免费开发key,免费开发的key可以拿到实时温湿度、三天温湿度预告,其余的都没有权限。2、根据和风API获取你要拿的城市的id/经纬度,具体参照城市信息搜索API。3、带着拿到的城市坐标/id 以及自己的key,请求获取天气、温湿度的API,具体参照天气预报和实况API。4、注意,天气预报的接口拿不到相对湿度。5、注意,和风天气有提供各种天气icon图,点击自取,天气实况的icon对应的就是图标名称...
2020-09-03 15:22:11
3415
原创 layui table 导出xls重写之导出全部数据
首先,找到layui包里的table.js,然后格式化代码在大概115行的地方,改成然后在大概这个位置,加一个方法如图所示,可以一键导出99999999条数据,绝对够使????
2020-07-29 16:41:52
749
原创 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
2020-07-09 11:43:38
929
原创 移动端input number maxlength 无效解决办法
<input type="number" oninput="if(value.length > 6) value = value.slice(0,6)" />
2020-07-06 17:54:55
512
转载 从输入url到页面返回的全过程
从输入url到页面返回的全过程。1.我们输入一个域名:www.baidu.com,然后点击确认;2.浏览器查找域名的IP地址。查找过程如下:首先是浏览器缓存,浏览器会缓存DNS记录一段时间;如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用,获取系统缓存中的记录;然后是路由器缓存,路由器一般会有自己的缓存;如果前者都没有找到,就需要从本地域名服务器开始进行DNS查询了。详细的DNS查询过程我在DNS工作原理及过程中讲到过。3.现在浏览...
2020-07-02 12:59:35
220
转载 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("");.
2020-07-02 11:21:53
1599
原创 js正则去掉字符串空格
//str为要去除空格的字符串://去除所有空格:str = str.replace(/\s+/g,"");//去除两头空格:str = str.replace(/^\s+|\s+$/g,"");//去除左空格:str=str.replace( /^\s*/, '');//去除右空格:str=str.replace(/(\s*$)/g, "");
2020-07-02 10:53:44
142
原创 微信小程序 picker date 时间 start 和 end 无效
<picker mode="date" value="{{date}}" start="{{start}}" end="{{end}}" bindchange="bindDateChange"> <view class="picker"> {{date}} {{week}} </view></picker>直接这样设置就可以了,开发者工具暂时不支持这两个属性,在真机上是有效的...
2020-06-29 19:49:00
2336
原创 微信小程序 radio checked=false
这属于微信小程序的bug,官方文档给的是这样的然而实际运用中,我的代码是这样<radio-group bindchange="radioChange"> <label> <radio value="0" checked="true"/> <text>预订单</text> </label> <label style="margin-left: 20rpx">
2020-06-29 19:24:42
1220
原创 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
2020-06-22 20:43:48
440
转载 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————————————
2020-06-19 15:22:29
78
转载 微信小程序开发---自定义动态tabBar
最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接拿走不谢。https://github.com/SuRuiGit/wxapp-customTabbar使用步骤如下:第一步:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替换成你自己的tabbar图片第二步:到app.json中配置tabBar,这里我
2020-06-19 14:23:24
415
原创 微信小程序报错: 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_
2020-06-19 13:54:41
3649
原创 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 < .
2020-06-17 09:18:36
600
原创 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设置输入法不可用...
2020-06-16 17:48:23
108
原创 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 ;}
2020-06-16 17:47:25
2652
原创 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
2020-06-16 17:46:49
104
原创 js 浏览器语音播报
var utterThis = new window.SpeechSynthesisUtterance('支付宝到账,323324234');window.speechSynthesis.speak(utterThis);
2020-06-16 17:45:51
649
1
原创 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.
2020-06-16 17:45:20
135
原创 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.
2020-06-16 17:44:28
850
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;
2020-06-16 17:42:39
2874
原创 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++) {..
2020-06-16 17:27:10
1446
转载 打印页面时候的物理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。...
2020-06-16 11:28:25
1146
1
原创 微信公众号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 });
2020-05-30 22:22:13
214
原创 MAC版印象笔记误删回收箱如何找回
我的印象笔记版本按住键盘option键的同时,点击帮助 - 解决疑难- 打开本地数据库然后找到这个目录可以点png文件预览内容,还可以把.enml文件改成.html,在浏览器中打开预览笔记
2020-05-23 11:58:27
174
原创 js所有文件加载完后再开放页面+ajax获取本地文件提示跨域
一般做移动端动画类的页面(也称H5)的时候,我们会用到大量的图片,还很有可能会有背景音乐甚至视频,如果网速不好或者文件过多过大,就会出现问题,这种情况下我们就可以使用js代码,达到文件全部加载完再展示正式页面的效果。那么在实际项目中,我们肯定免不了用背景图片的情况(如果有全部用img标签做的大神,勿喷),那么怎么保证我们的每一个静态文件都参与到我们的loading文件数中呢?我们需要单独写一个json的文件来解决我们的问题,例如:这里插播一条知识点,我的json文件为什么会用stati...
2020-05-22 00:29:23
187
原创 js阻止移动端下拉滑动效果
document.body.addEventListener('touchmove', function (e) { e.preventDefault(); // 阻止默认的处理方式 即 下拉滑动效果}, { passive: false});
2020-05-21 23:24:10
399
原创 web端 m3u8播放器
m3u8文件介绍,请看m3u8文件格式详解m3u8播放器git地址,点击获取这个就是git上下载下来的文件目录,浏览器打开外面的index.htm,input里输入你的.m3u8文件的地址,点击play,就会跳转到player下面的index.html里,实现播放我的做法是,直接提取player里面的文件放到自己的项目目录,然后在进入这个链接的时候,直接在浏览器url上加 # + .m3u8地址ps:在浏览器看的时候,可能会报错:player.js:11 Uncaught (..
2020-05-20 13:45:48
3019
原创 UEditor代码高亮(适用于所有的富文本编辑器)
最近在写项目管理的时候,领导提出可以贴代码的需求,贴代码,自然就需要代码高亮;关于为什么选用UEditor,虽然这款百度出品的所见即所得编辑器已经很久没有更新了,但是现有的功能还是足够用的;第二点是UEditor的文档无比详细,而且中文对于国人来讲还是比CK之类的英文文档来的友好;第三点是个人觉得UEditor用起来比CK要方便一些。话不多说,大家一起来看一下:首先这边讲一下两种代码高亮方法;第一种是UE自带的shCore//接入css<link rel="styles
2020-05-09 11:08:24
918
转载 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...
2020-04-25 19:48:23
90
空空如也
Vue3的SSR服务端部署
2022-03-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人