移動端:web前端實用小技巧

littleGrow 發(fā)布于2019-08-30 10:57 / 2370人閱讀

摘要：及時搜索需要之后觸發(fā)，不能滿足及時搜索需求鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很好了，是標準事件，當元素值發(fā)生改變時觸發(fā)是當前對象發(fā)生改變，專屬例如均可用文字溢出顯示省略號解決如果是行內(nèi)元素加一個有的時候，移動端會因為設置了這個塊級

及時搜索

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

keypress 鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很好了，

input oninput是標準事件，當input元素value值發(fā)生改變時觸發(fā)

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

文字溢出顯示省略號

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

解決ios滑屏兼容

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

清除a標簽移動端閃爍效果

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

清除click事件閃爍效果

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

JS永動機原理

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

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

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

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

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

云服務器 GPU云服務器移動端web前端框架移動端web web移動端布局 web移動端開發(fā)

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114680.html

移動端:web前端實用小技巧

摘要：及時搜索需要之后觸發(fā)，不能滿足及時搜索需求鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很好了，是標準事件，當元素值發(fā)生改變時觸發(fā)是當前對象發(fā)生改變，專屬例如均可用文字溢出顯示省略號解決如果是行內(nèi)元素加一個有的時候，移動端會因為設置了這個塊級及時搜索 onchange 需要input onblur之后觸發(fā)，不能滿足及時搜索需求 keypress 鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很...

HitenDev 2019-08-26 13:54 評論0 收藏0
移動端:web前端實用小技巧

摘要：及時搜索需要之后觸發(fā)，不能滿足及時搜索需求鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很好了，是標準事件，當元素值發(fā)生改變時觸發(fā)是當前對象發(fā)生改變，專屬例如均可用文字溢出顯示省略號解決如果是行內(nèi)元素加一個有的時候，移動端會因為設置了這個塊級及時搜索 onchange 需要input onblur之后觸發(fā)，不能滿足及時搜索需求 keypress 鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很...

QiuyueZhong 2019-08-30 11:27 評論0 收藏0
移動端:web前端實用小技巧

摘要：及時搜索需要之后觸發(fā)，不能滿足及時搜索需求鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很好了，是標準事件，當元素值發(fā)生改變時觸發(fā)是當前對象發(fā)生改變，專屬例如均可用文字溢出顯示省略號解決如果是行內(nèi)元素加一個有的時候，移動端會因為設置了這個塊級及時搜索 onchange 需要input onblur之后觸發(fā)，不能滿足及時搜索需求 keypress 鍵盤點擊及時觸發(fā)，但是鼠標復制粘貼就不是很...

BlackFlagBin 2019-08-26 18:37 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0