移动端web前端实用小技巧

3次阅读

共计 1009 个字符,预计需要花费 3 分钟才能阅读完成。

及时搜索

  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)

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

作者:易企秀——王明

正文完
 0

移动端web前端实用小技巧

3次阅读

共计 999 个字符,预计需要花费 3 分钟才能阅读完成。

及时搜索

  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)

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

正文完
 0