移动端:web前端实用小技巧

2024年5月6日 244次阅读 来源: 王明

及时搜索

  1. onchange 需要input onblur之后触发，不能满足及时搜索需求
  2. keypress 键盘点击及时触发，但是鼠标复制粘贴就不是很好了，
  3. input oninput是标准事件，当input元素value值发生改变时触发
  4. onpropertychange是当前对象发生改变，ie专属（例如 input textarea）均可用

文字溢出显示省略号

css 解决 text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
如果是行内元素 加一个display:block;
有的时候，移动端会因为设置了这个 块级属性而改变对齐方式，可以选择js控制
js substring 截取固定字符串，用…代替 即可

解决ios滑屏兼容

css:-webkit-overflow-scrolling:touch;-webkit-transform: translate3d(0,0,0);

清除a标签 移动端闪烁效果

清除所有a标签在点击时出现的特效：a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

清除click事件闪烁效果

event.preventDefaule()阻止默认事件，如果有冒泡事件，还需阻止冒泡事件，event.stopPropagation()

JS永动机原理

“永动机”顾名思义就是一直运动的机器，原理是setIntval(function(){},time),显示器渲染速度在1000ms 60z左右为最佳，再快也渲染不上，所以time设置成为20最好, 而控制时间部分，如果是20的整数倍可以用次数来叠加
例如：

var num=0
setIntval(function(){
    num++
    if(num==5){
            alert("100ms")  ,ps:这个方法为下等
    }
},20)

第二种方法是用 new Date() 获取客户端当前的时间，通过getTIme()转化成毫秒，通过当前时间的改变来 执行你需要的方法
例如：

var lasttime=0;
setIntval(function(){
   var curtime=new Date().getTime()
   if(curtime-lasttime>=1000){
         alert("1s执行一次")
         lasttime=curtime
   }
},20)

永动机很适合做游戏执行部分，感兴趣的小伙伴可以关注留言跟小编一起探讨一下

    原文作者：王明
    原文地址: https://segmentfault.com/a/1190000019269999
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞