乐趣区

移动端web前端实用小技巧

jiezi

及时搜索

  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)

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

作者：易企秀——王明
退出移动版