分享網(wǎng)頁(yè)檢測(cè)搖一搖實(shí)例代碼
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
var Shaker = function(f){ // 搖一搖: 檢測(cè)到3次搖動(dòng)算一次搖一搖, 搖動(dòng)后調(diào)用處理函數(shù), 不再檢測(cè)搖動(dòng) // f 搖動(dòng)后的回調(diào) this.callback = f; this.status = 0; // 0: 偵聽(tīng)未開(kāi)始 1: 偵聽(tīng)開(kāi)始 this.speed = 15; this.lastX = this.lastY = this.lastZ = 0; this.num = 0; // 檢測(cè)觸發(fā)次數(shù) this.minNum = 3; // 最小檢測(cè)觸發(fā)次數(shù) this.beginSecond = 0; // 開(kāi)始檢測(cè)的秒數(shù) this.maxSecond = 3; // 最大間隔秒數(shù) this.handlerWrap = function(){}; } Shaker.prototype.listen = function(){ // 偵聽(tīng)搖動(dòng) var that = this; if (this.status == 0 && window.DeviceMotionEvent) { this.status = 1; this.handlerWrap = function(event){ that.handler(event) } window.addEventListener('devicemotion', this.handlerWrap, false); } } Shaker.prototype.release = function(){ // 停止偵聽(tīng) if(this.status == 1){ if (window.DeviceMotionEvent) { window.removeEventListener('devicemotion', this.handlerWrap); } this.status = 0; this.num = 0; } } Shaker.prototype.reset = function(){ // 重置檢測(cè) if(this.status == 1){ this.num = 0; } } Shaker.prototype.handler = function(event){ // 傳感器事件處理 if(this.status == 1){ var acceleration =event.accelerationIncludingGravity; var x = acceleration.x; var y = acceleration.y; var z = acceleration.z; if( Math.abs(x-this.lastX) > this.speed || Math.abs(y-this.lastY) > this.speed || Math.abs(z-this.lastZ) > this.speed ) { if(this.num == 0){ this.beginSecond = Date.parse(new Date()) / 1000 } this.num += 1; } this.lastX = x; this.lastY = y; this.lastZ = z; if(this.num >= this.minNum){ var now = Date.parse(new Date()) / 1000; if(now - this.beginSecond <= this.maxSecond){ this.release(); if(this.callback){ this.callback(); } } this.reset(); } } }
用法:
var s = new Shaker(function(){ /*搖動(dòng)后的回調(diào)*/ }); s.listen();
好了,本文所述給大家介紹到這里,后續(xù)還會(huì)持續(xù)更新,希望本文給大家分享網(wǎng)頁(yè)檢測(cè)搖一搖實(shí)例代碼的相關(guān)知識(shí)對(duì)大家有所幫助。
- Android利用傳感器實(shí)現(xiàn)微信搖一搖功能
- Android 微信搖一搖功能實(shí)現(xiàn)詳細(xì)介紹
- IOS 實(shí)現(xiàn)搖一搖的操作
- iOS實(shí)現(xiàn)微信朋友圈與搖一搖功能
- javascript html5搖一搖功能的實(shí)現(xiàn)
- 使用PHP實(shí)現(xiàn)微信搖一搖周邊紅包
- php官方微信接口大全(微信支付、微信紅包、微信搖一搖、微信小店)
- 安卓系統(tǒng)中實(shí)現(xiàn)搖一搖畫(huà)面振動(dòng)效果的方法
- HTML5使用DeviceOrientation實(shí)現(xiàn)搖一搖功能
- Android實(shí)現(xiàn)搖一搖功能
相關(guān)文章
如何通過(guò)setTimeout理解JS運(yùn)行機(jī)制詳解
這篇文章主要給大家介紹了關(guān)于如何通過(guò)setTimeout理解JS運(yùn)行機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03JS實(shí)現(xiàn)課程表小程序(仿超級(jí)課程表)加入自定義背景功能
這篇文章主要介紹了JS實(shí)現(xiàn)課程表小程序(仿超級(jí)課程表)加入自定義背景功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12Window.Open如何在同一個(gè)標(biāo)簽頁(yè)打開(kāi)
這篇文章主要介紹了Window.Open如何在同一個(gè)標(biāo)簽頁(yè)打開(kāi),需要的朋友可以參考下2014-06-06javascript 獲取radio的value的函數(shù) [已測(cè)]
javascript 獲取radio的value的函數(shù) 如果與asp,php等后臺(tái)語(yǔ)言結(jié)合時(shí),一般用不到,但在純js環(huán)境下是必須的。2009-06-06cocos2dx+lua實(shí)現(xiàn)橡皮擦功能
這篇文章主要為大家詳細(xì)介紹了cocos2dx+lua實(shí)現(xiàn)橡皮擦功能,類(lèi)似刮刮樂(lè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12史上最全JavaScript常用的簡(jiǎn)寫(xiě)技巧(推薦)
這篇文章主要介紹了JavaScript常用的簡(jiǎn)寫(xiě)技巧,列舉了20條js中常用的簡(jiǎn)寫(xiě)技巧,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下2017-08-08js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07