7788的笔记
@xiaomajia
这是一个零散的记录遇到的问题的地方
展开
-
解决npm i报错Error: Can't find Python executable "python", you can set the PYTHON env variable.
问题描述gyp ERR! configure errorgyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.gyp ERR! stack at PythonFinder.failNoPython (C:\Users\lslupingy\Desk...原创 2020-04-23 09:53:06 · 2025 阅读 · 3 评论 -
利用滚动条进行移动端水平滑动
需要做水平触摸滑动的效果,但是因为是一个公众号内嵌网页,不想引用插件或者有太多的代码,就想着用浏览器自带的滚动条达到所期望的效果,结构及兼容优化如下:Question:(1)实现水平滑动(2)滚动条滚动,自动显示 li.active 项所在的位置1. HTML结构<div class="scroll_hide"> <div id="machine_b...原创 2018-05-31 18:19:35 · 2254 阅读 · 0 评论 -
移动端动态计算根元素的字体大小
(function (doc, win) { var docEl = doc.documentElement, //文档根标签 resizeEvent = 'orientationchange' in window ? 'orientationchang' : 'resize'; //viewport变化事件源 var rescale = function () { wi...转载 2018-05-30 16:39:53 · 1734 阅读 · 0 评论 -
解决JS浮点数(小数)计算加减乘除的精度问题
在 JavaScript 中整数和浮点数都属于Number数据类型,所有数字(包括整数)都是以 64 位浮点数形式储存。JavaScript 里的数字是采用IEEE 754标准的 64 位双精度浮点数,计算机进行计算的时候,会把数字转换为二进制,进行运算之后再转换为十进制,但是运算过程中小数部分最多支持52位,就会出现运算精度问题。解决方法:解决JS浮点数(小数)计算加减乘除的bug加法函...转载 2018-05-29 15:25:01 · 5181 阅读 · 2 评论 -
JS实现checkbox全选反选
需求:1. 点击全选框,所有的子选项全部选中;再次点击,所有的子选项全部取消选中状态。2. 当所有的子选项全部选中时,全选框状态改为选中;子选项有一个没有选中,全选框不选中。3. 点击反选按钮,所有的子选项改变选中状态。HTML结构: <div class="wrap"> <table> <thead> ...原创 2018-04-12 22:09:49 · 1563 阅读 · 0 评论 -
JS实现微信支付宝页面点击返回关闭当前页
QUESTIONS 问题:1. iPhone上使用微信扫码进入公众号内页,页面跳转后返回,出现样式错乱(但是刷新后恢复正常,安卓手机一直正常,未出现问题)。 PS: 该问题仍未解决,猜测是返回时css加载问题,暂定在该页面返回时禁用浏览器自带的返回事件,手动定向到之前页面。2. 在特定页面点击返回按钮,关闭当前页面。<!DOCTYPE html><...原创 2018-04-11 16:37:04 · 3670 阅读 · 0 评论 -
JS判断客户端是Android还是iOS
一: 通过浏览器的 navigator.userAgent 判断是Android还是iOS: var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //判断是否是 android终端 var isiOS = !!u....原创 2018-05-10 11:42:15 · 506 阅读 · 0 评论 -
移动端调用微信和支付宝的扫一扫功能
目录1. 调用微信扫一扫功能:1.1绑定域名1.2引入JS文件1.3 通过config接口注入权限验证配置1.4 调用扫一扫2. 调用支付宝扫一扫(通过Alipay JSSDK)2.1 引入相关的js文件2.2 调用扫一扫3.调用支付宝扫一扫(通过Alipay JSAPI)1. 调用微信扫一扫功能:1.1绑定域名在微信公众平台中配置安全域名...原创 2018-09-05 18:14:44 · 13275 阅读 · 14 评论 -
移动端真机调试工具--weinre
目录1. weinre(1)weinre安装(2)weinre使用虽然当前各种浏览器都为开发者提供了很多模拟手机设备的功能,但是模拟毕竟是模拟,模拟环境中正常的代码到了真机上访问,仍旧会有各种样式/方法兼容的问题,最近在尝试使用weinre和微信的web开发者工具的移动调试,进行真机下的样式的调试。1. weinreweinreis a debugger for w...原创 2018-08-31 15:03:10 · 1780 阅读 · 0 评论 -
IOS下的微信H5页面的底部前进后退横栏的适配问题
Question:最近做一个在微信和支付宝内置浏览器中运行的移动web界面,前几个月ios微信更新之后,微信将后退的按钮移至了底部横栏,遮挡住了原先底部的操作按钮。由于之前的页面设计是整屏显示禁止触摸滚动效果的,就想着是不是可以隐藏微信内置的底部横栏。Answer:1. 经过查资料,很多人说可以调用Weixin为H5应用提供开放原生能力的JS接口来隐藏/显示底部的状态栏。代码如下:d...原创 2018-08-30 18:27:56 · 23674 阅读 · 0 评论 -
移动端兼容性问题总结
1.iOS (iPhone和iPad)的点击闪屏问题原因:在ios上,当点击一个链接或者通过js绑定了点击事件的元素时,会出现一个半透明的背景,当手指离开屏幕,该灰色背景消失,出现“闪屏”;解决方法:方法一:将半透明的遮罩层改为全透明(验证可行)html, body { -webkit-tap-highlight-color: rgba(0,0,0,0);}方法二...原创 2018-07-20 16:15:01 · 1552 阅读 · 0 评论 -
在页面上直接拨打电话以及发送短信
1. 实现网页拨打电话<a href="tel:12345678901">网页直接拨打电话</a>2. 实现网页发送短信<a href="sms:15112345678?body=这里是需要发送的短信的具体内容">网页发送短信</a>PS: 需要注意的是,使用以上的方法,手机浏览器或者支付宝浏览器内可以直接跳转到手机的拨号页面,但...原创 2018-05-31 18:32:15 · 10723 阅读 · 0 评论 -
移动端tab栏中嵌套轮播图
问题:最近写一个移动端的项目,其中一个页面是每个tab栏的内容区均为一个轮播图,用的是swiper实现的轮播图效果,但是写完之后发现,只有第一个tab栏对应的swiper是有效果的,切换后就无法实现轮播的效果。解决方法:方法一(推荐):在初始化swiper对象的时候,添加observer和observeParents两个属性,当修改swiper自身/父元素/子元素的时候,均会自动初始化...原创 2018-05-06 23:26:08 · 1290 阅读 · 2 评论 -
弹出层中多个输入框,iOS微信下点击错位问题
问题描述iOS微信下,弹出层中有多个输入框时,点击获取焦点后,元素位置错位;同时收起键盘后不能再次输入;相关按钮无法点击。PS. 这是微信在iOS下的bug解决办法在输入框 blur 的时候调用 window.scrollTo具体操作如下:html <input type="number" v-model="phone" @blur="scrollto0">jsme...原创 2019-07-09 09:39:18 · 765 阅读 · 0 评论 -
关于display:flex碰上white-space:nowrap的问题
当 display:flex 碰上 white-space nowrap 的时候,会打乱 flex 布局。解决方法:给 flex 布局级设置最小宽度为 0。示例当 display:flex 碰上 white-space nowrap,flex布局被打乱了,示例中表现为内部元素超出父元素范围(可能存在其他情况)。[外链图片转存失败(img-8LARnioy-1562636390940)(e...原创 2019-07-09 09:40:17 · 1110 阅读 · 0 评论 -
ECMAScript 严格模式
ECMAScript5引入了严格模式(strict mode)的概念。在严格模式下,ECMAScript3中的一些不确定的行为将得到处理,对于某些不安全的操作也会抛出错误。1. 如何在脚本中启用严格模式:在顶部添加"use strict"$(function () { "use strict" // code...})2. 严格模式下的区别:1)严格模式和非严...原创 2018-07-23 22:33:22 · 203 阅读 · 0 评论 -
常用正则表达式
目录一、常用判断二、数字相关三、正则基础一、常用判断1. 手机号码 /^[1][3,4,5,7,8][0-9]{9}$/2. 邮政编码 /[1-9]\d{5}(?!\d)/3. 电子邮箱 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/4. 地理经度 /^(([1-9]\\d?)|(1[0-7]\...原创 2018-08-04 21:19:36 · 218 阅读 · 0 评论 -
本地存储(一)—— Cookie、SessionStorage和LocalStorage详解
目录1. Cookie2. Web Storage2.1 Session Storage2.2 Local Storage2.3 Web Storage 的浏览器支持情况3. Cookie、SessionStorage和LocalStorage的对比Cookie、SessionStorage和LocalStorage:浏览器的缓存机制提供的可以将用户数据存储在客户端上...原创 2018-10-29 11:59:05 · 316 阅读 · 0 评论 -
HTTP系列(一)—— TCP/IP的分层管理及通信传输
1. TCP/IP的分层管理TCP/IP协议族按照层次分为以下几层:应用层,传输层,网络层和数据链路层。1.1 应用层应用层决定了向用户提供应用服务时的通信活动;FTP协议(文件传输协议),HTTP协议,DNS服务(域名解析服务)等均处于该层。1.2 传输层传输层提供处于网络连接中的两台计算机之间的数据传输;TCP协议(传输控制协议)和UDP协议(用户数据报协议)处于该层。...原创 2018-11-03 19:39:22 · 394 阅读 · 0 评论 -
JavaScript自调用函数的外层()的问题
在自调用函数中,我们经常看到诸如 (function () {})() 或者 (function(){}())的写法,那外层的这个圆括号()是否可以去掉呢?答案是不可以的。1. 命名函数的定义和调用:// 函数声明function test() { console.log('function');}// 函数调用test();2. 匿名函数的自调用:/...原创 2018-11-20 14:09:46 · 833 阅读 · 0 评论 -
npm常用命令
npm 常用命令# 生成 package.json 文件(需要手动选择配置)npm init# 生成 package.json 文件(使用默认配置)npm init -y# 一键安装 package.json 下的依赖包npm i# 在项目中安装包名为 xxx 的依赖包(配置在 dependencies 下)npm i xxx# 在项目中安装包名为 xxx 的依赖包(配置...原创 2018-12-28 13:55:59 · 448 阅读 · 0 评论 -
yarn常用命令
yarnyarn 常用命令# 生成 package.json 文件(需要手动选择配置)yarn init# 生成 package.json 文件(使用默认配置)yarn init -y# 一键安装 package.json 下的依赖包yarn# 在项目中安装包名为 xxx 的依赖包(配置在 dependencies 下),同时 yarn.lock 也会被更新yarn add...转载 2018-12-28 13:57:29 · 570 阅读 · 0 评论 -
button 写在 form 表单中导致页面刷新问题
貌似之前写代码的时候很自然的没有将 button 写在 form 表单当中,这次把 button 写在了 form 标签当中,发现每次点击按钮都会刷新页面,代码如下:<form> <!-- ... --> <button>提交</button> <button>重置</button></form>原创 2019-03-04 14:34:10 · 772 阅读 · 1 评论 -
echarts使用常见问题:参数合并等
1. 设置动态改变图表内容时不合并在echarts中,所有参数和数据的修改都可以通过setOption完成,但是ECharts 会将新的参数和数据与原始数据合并,然后刷新图表。所以当你动态改变了echarts的数据之后,会发现原来的数据还是留在视图界面。解决: 将setOption的第二个参数设置为truemychart.setOption(option, true);// ch...原创 2018-08-03 11:45:50 · 1015 阅读 · 0 评论 -
表单验证——input和required冲突解决
1.input和required冲突解决Question: 使用表单提交验证必填字段时,若同时给 input[type="file"] 添加 readonly 以及 required 属性,则发现,required必填验证失效,既不会提示必填,也可以成功提交。解决方法:将 readonly 改为onfocus="this.blur()"<input type="text" ...原创 2018-10-18 14:13:14 · 5757 阅读 · 0 评论 -
JavaScript格式化时间与日期
1. Date 对象方法toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。 "2018/10/8 上午8:00:00" toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。"上午8:00:00" toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部...原创 2018-10-08 14:24:07 · 3411 阅读 · 0 评论 -
JS节流和防抖
目录1. JS节流和防抖的应用场合2. 未使用节流和防抖的情况3. js防抖4. js节流1. JS节流和防抖的应用场合在网页实际运行的某些场景下,有些事件时会被不间断的被触发的,如resize事件,而不像是我们想象中的,滚动一次触发一次。这种情况下,由于过于频繁地DOM操作和资源加载,严重影响了网页性能,甚至会造成浏览器崩溃。常见应用场景:(1)window的 ...原创 2018-09-12 11:22:54 · 5926 阅读 · 1 评论 -
前端实现图片压缩上传(兼容ios10系统)
Questions:近期需要做一个需求,关于前端获取图片后压缩,再上传给后台服务器或者上传至oss后将路径传给后台服务器,压缩的时候发现在ios10及以下的系统是无效的,经查证,这是由于使用canvas的HTMLCanvasElement.toBlob()方法创造blob对象的时候,ios10及以下系统无法调用。Answer:1. 实现前端压缩图片并上传(1)HTML:图片预览盒子...原创 2018-08-29 14:35:22 · 2802 阅读 · 1 评论 -
jQuery中.attr()与.prop()的比较
attr() 和 prop() 方法均可用于设置或返回被选元素的属性值。prop()是jQuery 1.6 版本之后新增的属性值,若引用的是1.6之前的jQuery.js文件,则只能用attr()。Question: 在写代码过程中遇到了一个问题,初次渲染的时候,给 input[type=radio] 添加了 .attr('check', true) 之后,单选框被选中,但是在取消编辑返回初始...原创 2018-08-28 10:23:01 · 161 阅读 · 0 评论 -
去除手机移动端alert的时候带有的网址
window.alert = function (name) { var iframe = document.createElement("IFRAME"); iframe.style.display = "none"; iframe.setAttribute("src", 'data:text/plain,'); document.documentElemen...原创 2018-08-22 11:29:30 · 724 阅读 · 0 评论 -
使用input[type=file]原生实现图片的预览和上传
1. 模仿表单提交:创建一个FormData对象 调用它的 append() 方法来添加字段// formData.append(key, value);var fd = new FormData();fd.append("username", "Groucho");2. 使用 FileReader 对象进行预览// 预览var reader = new...原创 2018-08-07 21:02:02 · 11370 阅读 · 0 评论 -
HTTP系列(二)—— 常见的HTTP状态码
目录 1. 状态码的类别2. 状态码详解 2.1 成功状态码2.2 重定向状态码2.3 客户端错误状态码2.4 服务端错误状态码 HTTP状态码负责表示客户端HTTP请求的返回结果、标记服务端处理是否正常、通知出现的错误等。借助于状态码,用户可以知道服务端是正常处理了请求还是出现了错误。 1. 状态码的类别状态码的第一位数字制定了响应类别,一般分为以下五种:...原创 2018-10-28 22:13:31 · 696 阅读 · 0 评论