日常问题记录

开个随笔记录一下日常的问题

工作积累、学习积累

 

————————————————————————————————————————————————————————————————————————————————————

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可以为传入的参数

转载于:https://www.cnblogs.com/zhuxingqing/p/11489947.html