移動(dòng)端:web前端實(shí)用小技巧

BlackFlagBin 發(fā)布于2019-08-26 18:37 / 672人閱讀

摘要：及時(shí)搜索需要之后觸發(fā)，不能滿足及時(shí)搜索需求鍵盤點(diǎn)擊及時(shí)觸發(fā)，但是鼠標(biāo)復(fù)制粘貼就不是很好了，是標(biāo)準(zhǔn)事件，當(dāng)元素值發(fā)生改變時(shí)觸發(fā)是當(dāng)前對(duì)象發(fā)生改變，專屬例如均可用文字溢出顯示省略號(hào)解決如果是行內(nèi)元素加一個(gè)有的時(shí)候，移動(dòng)端會(huì)因?yàn)樵O(shè)置了這個(gè)塊級(jí)

及時(shí)搜索

onchange 需要input onblur之后觸發(fā)，不能滿足及時(shí)搜索需求

keypress 鍵盤點(diǎn)擊及時(shí)觸發(fā)，但是鼠標(biāo)復(fù)制粘貼就不是很好了，

input oninput是標(biāo)準(zhǔn)事件，當(dāng)input元素value值發(fā)生改變時(shí)觸發(fā)

onpropertychange是當(dāng)前對(duì)象發(fā)生改變，ie專屬（例如 input textarea）均可用

文字溢出顯示省略號(hào)

css 解決 text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
如果是行內(nèi)元素加一個(gè)display:block;
有的時(shí)候，移動(dòng)端會(huì)因?yàn)樵O(shè)置了這個(gè) 塊級(jí)屬性而改變對(duì)齊方式，可以選擇js控制
js substring 截取固定字符串，用...代替即可

解決ios滑屏兼容

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

清除a標(biāo)簽移動(dòng)端閃爍效果

清除所有a標(biāo)簽在點(diǎn)擊時(shí)出現(xiàn)的特效：a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

清除click事件閃爍效果

event.preventDefaule()阻止默認(rèn)事件，如果有冒泡事件，還需阻止冒泡事件，event.stopPropagation()

JS永動(dòng)機(jī)原理

“永動(dòng)機(jī)”顧名思義就是一直運(yùn)動(dòng)的機(jī)器，原理是setIntval(function(){},time),顯示器渲染速度在1000ms 60z左右為最佳，再快也渲染不上，所以time設(shè)置成為20最好, 而控制時(shí)間部分，如果是20的整數(shù)倍可以用次數(shù)來疊加
例如：

var num=0
setIntval(function(){
    num++
    if(num==5){
            alert("100ms")  ,ps:這個(gè)方法為下等
    }
},20)

第二種方法是用 new Date() 獲取客戶端當(dāng)前的時(shí)間，通過getTIme()轉(zhuǎn)化成毫秒，通過當(dāng)前時(shí)間的改變來執(zhí)行你需要的方法
例如：

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

永動(dòng)機(jī)很適合做游戲執(zhí)行部分，感興趣的小伙伴可以關(guān)注留言跟小編一起探討一下