分享網(wǎng)頁檢測搖一搖實(shí)例代碼
更新時(shí)間:2016年01月14日 15:05:55 投稿:mrr
這篇文章主要介紹了分享網(wǎng)頁檢測搖一搖實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
var Shaker = function(f){
// 搖一搖: 檢測到3次搖動(dòng)算一次搖一搖, 搖動(dòng)后調(diào)用處理函數(shù), 不再檢測搖動(dòng)
// f 搖動(dòng)后的回調(diào)
this.callback = f;
this.status = 0; // 0: 偵聽未開始 1: 偵聽開始
this.speed = 15;
this.lastX = this.lastY = this.lastZ = 0;
this.num = 0; // 檢測觸發(fā)次數(shù)
this.minNum = 3; // 最小檢測觸發(fā)次數(shù)
this.beginSecond = 0; // 開始檢測的秒數(shù)
this.maxSecond = 3; // 最大間隔秒數(shù)
this.handlerWrap = function(){};
}
Shaker.prototype.listen = function(){
// 偵聽搖動(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(){
// 停止偵聽
if(this.status == 1){
if (window.DeviceMotionEvent) {
window.removeEventListener('devicemotion', this.handlerWrap);
}
this.status = 0;
this.num = 0;
}
}
Shaker.prototype.reset = function(){
// 重置檢測
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ù)還會持續(xù)更新,希望本文給大家分享網(wǎng)頁檢測搖一搖實(shí)例代碼的相關(guān)知識對大家有所幫助。
您可能感興趣的文章:
- 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)搖一搖畫面振動(dòng)效果的方法
- HTML5使用DeviceOrientation實(shí)現(xiàn)搖一搖功能
- Android實(shí)現(xiàn)搖一搖功能
相關(guān)文章
JavaScript操作localStorage實(shí)現(xiàn)保存本地json文件
這篇文章主要為大家詳細(xì)介紹了JavaScript如何操作localStorage實(shí)現(xiàn)保存本地json文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
如何制作浮動(dòng)廣告 JavaScript制作浮動(dòng)廣告代碼
如果有一定的JavaScript基礎(chǔ),制作浮動(dòng)廣告還是比較容易的,利用閑暇時(shí)間簡單制作了一個(gè),感興趣的朋友可以參考下哦2012-12-12
一道優(yōu)雅面試題分析js中fn()和return fn()的區(qū)別
這篇文章主要帶領(lǐng)大家深入理解JavaScript中 fn() 和 return fn() 的區(qū)別,感興趣的小伙伴們可以參考一下2016-07-07
JavaScript基礎(chǔ)知識之方法匯總結(jié)
本文給大家分享了javascript基礎(chǔ)知識,包括數(shù)組的方法,函數(shù)的方法,數(shù)字的方法,對象的方法,字符串的方法,常規(guī)方法,正則表達(dá)式方法,本文介紹的非常詳細(xì),具有參考價(jià)值特此分享供大家參考2016-01-01

