03 2020 档案
摘要：今天客户发来一大堆图片资料，居然是heic格式的 如何快速免费转为jpg呢？ 给大家推荐：https://blog.csdn.net/MAOZEXIJR/article/details/92596467 真是无比感谢这种牛逼又大方的大神 直接贴出源码，简直太伟大！！！
阅读全文
摘要：官网 http://mint-ui.github.io/#!/zh-cn 安装 cnpm install mint-ui -S 在main.js中引入改插件 Toast效果演示： 查看文档 在页面中调用插件 Message box效果演示： 这是移动端插件，所以调整到移动端演示： 底部tabbar演
阅读全文
摘要：vue状态管理vuex 全局状态管理，所有页面共享数据 设置数据： this.$store.dispatch("increment",100000); 获取数据： this.$store.state.num; 首先下载插件： cnpm install vuex --save 然后导入插件： 找到ma
阅读全文
摘要：按照国际惯例先放效果图 贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .container{ width:1200px; height:auto; } .
阅读全文
摘要：苹果: 在设置-通用-清空缓存 安卓的，可以用这个网址来清除缓存 https://debugx5.qq.com/ 有更好的方法求小伙伴推荐。。
阅读全文
摘要：首先保证路径正确，引入ttf字体，没有生效 使用在线工具把ttf转为更多常用的字体格式 网址：https://www.fontke.com/tool/convfont/ css里补全格式： 生效了 还有另一种原因，就是服务器没有在iis里加字体文件的映射 解决方法: 添加MIME类型映射 直接在II
阅读全文
摘要：产品封面图，鼠标点击上去，右边会出现放大的高清大图 如何获取到大图呢？ 封面图尺寸默认是430*430 在控制台找到图片链接，网址栏里打开 手动把网址栏里的430x430改成800x800 大图到手！
阅读全文
摘要：一、取消a标签在移动端点击时的蓝色 a{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; }
阅读全文
摘要：即使使用 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式 类似<a>标签这种inline-block元素，它们之间还是存在着留白和间距。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
阅读全文
摘要：video视频是通过编辑器在后台上传的，上传视频时编辑器要求必须传入视频的宽高，而且必须是数字，不能是百分比 实在太不智能了，传具体数字怎么适配各种型号的设备呢？？？ 在前台显示视频的时候，所有的video标签都有设置好的width和height属性 我首先移除了视频设置的宽高属性 $(functi
阅读全文
摘要：网站是用的kindeditor编辑器，今天测试上传视频功能，提示说上传失败，容量超出 打开upload_json.php 修改$max_size $max_size = 100000000; 成功上传视频后，发现生成的格式是embed，而且前台并不能显示播放 于是决定将原来系统中的embed标记更改
阅读全文
摘要：数据库大概长这样 导出，格式选择 csv for ms excel 导出的csv文件用记事本打开，另存为txt格式，编码选择ANSI 把txt文件丢到excel里打开，发现所有内容都在同一列，长这样 选择数据-分列 分列成功，完美！
阅读全文
摘要：JavaScript性能优化 DOM操作优化 查找DOM元素能用id就用id，是最高效的查找方法（还得看具体环境） document.getElementById('slider') 从document开始查找子元素效率不高，建议从具体父元素开始查找 减少元素查找的层级 var sliderItem
阅读全文
摘要：CSS性能优化 CSS选择器优化 如果可以直接选中元素，不需要加一些多余的修饰 /*不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。*/ div#slider.slider { } 一般来说，class用于样式，id用于js，因为id定义的样式不利于复用 保证不会误选的情况下，
阅读全文
摘要：HTML性能优化 查看淘宝移动端的做法： css全部使用内联，js有内联，也有引入外部文件 查看京东移动端的做法： css和js都是既有内联，既有引入外部文件 内联的优点： 减少HTTP请求 内联的缺点： 1、没法复用 2、是HTML变大，加载变慢 3、不利于复用（可以用工程化手段解决，维护源码，上
阅读全文
摘要：先准备个测试模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
阅读全文
摘要：单行文字溢出省略： 给容器添加css样式： .text-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } <!DOCTYPE html> <html lang="en"> <head> <meta c
阅读全文
摘要：根本原因：double click 双击 移动端默认双击情况下会有方法效果，当你点击一次之后，移动端无法判断你是否下一次还会继续完成双击，因此存在300 ms 延迟 有一部分浏览器，比如chrome浏览器，当你在meta头设置width=device-width时，它会自动禁止300 ms的延迟 推
阅读全文
摘要：h5 浏览器兼容性问题： 浏览器兼容性情况可以在这个网站查询 https://caniuse.com/ 绿色代表完全支持，黄色代表部分支持，红色代表不支持 右上角的黄色小短杠表示要加一些厂商前缀 兼容性测试： <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：在控制台-机型-点击小三角-选择edit 有更多机型可以选择 选择具体的机型之后，dpr是不能更改的。选择responsive可以更改机型 如果没有看到dpr就去右边小点点那里找到并打开 真机调试： 浏览器上的调试工具只是模拟行为，最后还是需要在真机上查看测试 可以用一些集成环境搭建服务器，然后上传
阅读全文
摘要：小程序开发准备 1、申请小程序账号（appid） 2、下载并安装微信开发者工具 进入微信公众平台 https://mp.weixin.qq.com/ 立即注册小程序 按照信息填写之后完成注册 具体操作可查看小程序官方开发文档 使用注册的小程序账号密码，登录 https://mp.weixin.qq.
阅读全文
摘要：移动端事件有哪些： 触摸事件 手势事件 传感器事件 （后面两个兼容性不怎么样，因此重点就是触摸事件） 触摸事件： touch 事件 pointer 事件 （PC端可能会使用jQuery做动画，移动端一般不会，基本都是使用css3做动画） ontouchstart （必须在元素内部才能触发） onto
阅读全文
摘要：前提：父容器设置了display:flex 或 inline-flex order 项目的排列顺序 默认是0，数字越小，排在越前面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
阅读全文
摘要：box-sizing 在pc端一般使用默认值 content-box 在移动端一般使用 border-box <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
阅读全文
摘要：物理像素=设备像素 css像素=逻辑像素=设备独立像素=实际开发中使用的像素 .box{ width:200px; height:100px; } 设备像素比 dpr = 设备像素 / css像素 （缩放比为1的情况） dpr 描述的是单方向，因此当dpr=2，意味着一个css像素由2x2个物理像素
阅读全文
摘要：在开发网站的时候，有的页面需要加载ueditor编辑器，如果内容很长，默认设置的时候编辑器会根据内容拉长,而不是页面出现滚动条，如果拖动页面滚条，会比较麻烦，要拖动很长才能看到提交按钮。 如何才能让编辑辑器出现滚动条？ 统一设置的方法： 在编辑器目录下的config.js文件中，修改autoHeig
阅读全文
摘要：今天一个已经上线的网站，在通过php写的程序进行数据库备份的时候报500错误 之前上线时一直是正常的 查了好久发现原因是数据库里存储了访客信息，在访客资料达到两万多份的时候，估计由于备份数据量太大，页面就崩了 我的解决方法：定时清空很早之前的访客信息 如果小伙伴们有更好的方法求分享！！！
阅读全文
摘要：动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9
阅读全文
摘要：区域剪辑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #
阅读全文
摘要：绘制文字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <bo
阅读全文
摘要：线性渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <bo
阅读全文
摘要：平移 translate(x,y) 注意平移的是坐标原点，而不是线条本身 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px s
阅读全文
摘要：我的环境是：apache+mysql+php 首先查看是否开启了socket与openssl扩展 如果没有那就找到php.ini文件并打开，开启这这个扩展 将extension=php_openssl.dll这个句代码前的“;”去掉 php_sockets.dll php_openssl.dll 发
阅读全文
摘要：canvas默认宽高是300*150px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </st
阅读全文
摘要：前提是你先买好证书，下载下来，证书压缩包打开共有3个文件 证书文件：以.crt为后缀或文件类型。 证书链文件：以.crt为后缀或文件类型。 密钥文件：以.key为后缀或文件类型。 在Apache安装目录中新建cert目录，并将解压的Apache证书、 证书链文件和密钥文件拷贝到cert目录中。 如果
阅读全文
摘要：HTML5约束验证API： willValidate 表示如果元素的约束没有被符合则值为 false validity validationMessage 用于描述与元素相关约束的失败信息。 checkValidity() 表示如果元素没有满足它的任意约束，返回false，其他情况返回 true s
阅读全文
摘要：NPM是随同NodeJS一起安装的包管理工具 允许用户从NPM服务器下载别人编写的第三方包到本地使用 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 由于新版的nodejs已经集成了npm，所以npm也一并安装好了。同样
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> localStorage.a=1; console.log(local
阅读全文
摘要：cookie劣势： 存储大小限制，4kb 单域名下有数量限制，50个左右 污染请求头，浪费流量 本地存储web storage 包括localStorage和sessionStorage localStorage 本身是一个对象，可以打印查看 <!DOCTYPE html> <html lang="
阅读全文
摘要：效果图 首先添加移动端meta <meta name="viewport" content="initial-scale=1.0,user-scaleble=no,width=device-width"> <!DOCTYPE html> <html lang="en"> <head> <meta c
阅读全文
摘要：AMap.event.addDomListener() 绑定事件 AMap.event.removeListener() 解绑事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <s
阅读全文
摘要：覆盖物状态改变时触发的事件 mousemove mouseover mouseout <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javasc
阅读全文
摘要：地图内部状态改变时触发的事件 complete <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://
阅读全文
摘要：引入插件 AMap.Transfer <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webap
阅读全文
摘要：骑行路线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/map
阅读全文
摘要：货车路线： 引入 AMap.TruckDriving 注意：和驾车路线、步行路线不同的是，必须指定cidy和size，并且坐标传入为json格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</ti
阅读全文
摘要：步行路线 引入插件 AMap.Walking <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Walk
阅读全文
摘要：驾车路线 引入插件 AMap.Driving <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driv
阅读全文
摘要：鹰眼插件 AMap.OverView 默认在地图右下角显示缩略图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src=
阅读全文
摘要：常用控件 AMap.MapType ：地图类型切换插件，可用于切换卫星地图 首先记得引入插件 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1
阅读全文
摘要：缩放比例尺控件 首先引入控件 AMap.Scale <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.S
阅读全文
摘要：使用AMap.Autocomplete() 自动补全插件，实现搜索功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" s
阅读全文
摘要：获取当前地图的行政区 getCity() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://web
阅读全文
摘要：在数据库中获取到了新闻标题，使用php截取一部分，出现问号乱码 原来的代码是： <?php echo substr($res['art_title'],0,20);?> 了解到substr() 截取中文字符会乱码，于是修改为 mb_substr() <?php echo mb_substr($res
阅读全文
摘要：双击可以调整高德地图的级别 zoom 改变初始地图的级别，zoom值越高，相当于鼠标双击放大，内容越详细，范围越小 center 改变初始地图的中心点，是一个数组，包含经纬度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
阅读全文
摘要：高德地图API最大优势：兼容各种浏览器 1、注册账号并申请key （申请key能拥有更完整的功能，没有key功能会受限） 进入高德地图官网 https://lbs.amap.com/ 选择web端-地图js API 按步骤注册开发者账号，然后登陆 在应用管理-我的应用-创建应用-为web添加key
阅读全文
摘要：Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。 （要支持ie低版本请下载5.4.3版 ）点击进入官网 下载地址：http://www.jq22.com/jquery
阅读全文
摘要：audio API 事件 play() 视频播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audio</title> <style> audio{ width:500px; } </style> </
阅读全文
摘要：audio主要支持的音频格式： mp3 ogg wav <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audio</title> </head> <body> <!-- 方法一 --> <audio con
阅读全文
摘要：video API事件 play() 可以控制视频自动播放 但是在chrome浏览器中不允许自动播放，只有在设置静音时才能允许自动播放 理由是：视频自动播放在终端非常耗电，因此被禁止 不过chrome浏览器允许自动播放7s以内的视频，然而很少有人会放7s以内的视频，而是直接用gif <!DOCTYP
阅读全文
摘要：video在各浏览器中显示的差异 video支持的基本视频格式：mp4 / webm / ogv <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>video</title> </head> <body> <v
阅读全文
