开个随笔记录一下日常的问题
工作积累、学习积累
————————————————————————————————————————————————————————————————————————————————————
2019.09.07
Q:div的height属性由0和auto之间切换时,不会触发transition的效果
A:使用max-height属性
—————————————————————————————————————————————————————————————————————————————————————
2019.09.09
Q:本地文件不能通过ajax访问本地json
A:
Windows:设置Chrome的快捷方式属性,在“目标”后面加上--allow-file-access-from-files,注意前面有个空格,重新打开Chrome即可。
Mac:只能通过终端打开浏览器:打开终端,输入下面命令:open -a "Google Chrome" --args --disable-web-security然后就可以屏蔽安全访问了[ --args:此参数可有可无]
—————————————————————————————————————————————————————————————————————————————————————
2019.09.10
Q:JS打印网页
A:window.print() 在IE中会跳过打印预览,但在chrome和360中会默认打开预览。为了测试可以选择保存为本地pdf。
Q:Img加载失败时加载默认图片
A:通过<img οnerrοr="οnerrοr='';className='showErrorImg'"> 在Img的onerror中可以直接写js语句,当图片加载失败时执行。
Q:git第一次提交时 git push 失败
A:git push -u origin master 一定要写完整!
————————————————————————————————————————————————————————————————————————————————————————————————
2019.09.11
Q:用vw做font-size单位时,firefox打印时比chrome字体小
A:chrome最小只会12px
解决办法:可以通过缩放chrome解决。
本次需求是打印时除chrome外浏览器字体太小,因此在媒体查询打印时 字体最小为12px;标题最小为14px;
Q:icon在服务器上变成乱码
A:紧急解决。替换为img。猜测由于项目编码导致。
——————————————————————————————————————————————————————————————————————————————————————————————————
2019.09.12
Q:移动端点击图片放大,并且可以支持缩放
A:借用swiper库,之后贴上详细链接
Q:PC监听鼠标键盘20秒无动作自动退出
A:学习优秀代码,先码再品,之后贴上详细链接
监听鼠标键盘 链接:https://www.cnblogs.com/zhuxingqing/p/11511529.html
———————————————————————————————————————————————————————————————————————————————————————————————————
2019.09.17
Q:背景图随着容器div大小伸缩
A: background-size: cover;
background-repeat: no-repeat;
background-image: url(...);
2019.09.18
Q:vue在控制台报警告
A: ① 标签名完全非法,不符合 <标签名></标签名> 的格式
② 与HTML原有的标签重名,比如图中的header标签为html5新增语义化标签
③ 与 Vue 保留的 slot、partial、component 重名
Q:使用margin-left制作过渡动画时,导致页面容器被撑大,疑似页面缩放失效
A:在父级元素加上overflow: hidden
——————————————————————————————————————————————————————————————————————————————————————————————————
2019.09.19
Q:display在none和block之间变换时,无法通过transition附加过渡动画
A:建议使用visible + opacity添加过渡动画
注:如果在使用某些框架的组件(如panel组件),无法拒绝使用display的情况下,可以自己定义动画如下:
@keyframes dis-tran-show{ 0% { opacity: 0; } 100% { opacity: 1; } } .layui-colla-content{ animation: dis-tran-show 1s ease-out; }
将这个class添加到元素上也可以实现过渡效果
Q:前端加密url中参数
A:
var url = "./table.html?" + window.btoa(window.encodeURIComponent("id=1232")) var encode = url.split('?')[1] console.log(window.decodeURIComponent(window.atob(encode)))
——————————————————————————————————————————————————————————————————————————————————————————————————
2019.09.20
Q:JS计算两个日期直接相差天数
A:(dt2.getTime() - dt1.getTime()) / 1000*60*60*24
Q:后端穿回来的字符串带了转义字符怎么处理
A:创建一个dom对象,使用dom的innerHTML转成字符串穿回来变成JSON格式
例:
var htmlStr = "{"other":"","value":"无症状,"}" var hide = document.createElement('div') hide.innerHTML = htmlStr res = JSON.parse(hide.innerHTML) value = res.value
Q:layui中根据后端数据重新渲染checkbox怎么做
A:对checkbox处理和其他一样,重要的是需要最后render重新渲染
layui.use(['form', 'element', 'layer'], function () { var form = layui.form var element = layui.element var layer = layui.layer //获取复选框数组 var zzInput = document.querySelectorAll('#zz input') zzInput = Array.prototype.slice.call(zzInput) zzInput.forEach((item, index) => { //重置选中状态 item.checked = false if (value.indexOf(item.title) !== -1) { item.checked = true } }) //layui需要重新渲染 form.render('checkbox') })
——————————————————————————————————————————————————————————————————————————————————————————————————————
2019.09.21
Q:动态获取JS对象的属性值
A:例:已知 dt= {other:"", value: "无症状"}, 需要根据参数去获取other或者value
var key = "value"; return dt[key]; //key可以为传入的参数