Pelaksanaan kemahiran javascript html5 shake function

Pelaksanaan kemahiran javascript html5 shake function_javascript

WBOY

Lepaskan： 2016-05-16 15:04:43

asal

1795 orang telah melayarinya

Melalui maklumat di Internet dan kompilasi saya sendiri, saya menulis pengenalan kepada fungsi goncang HTML untuk sandaran teknikal.
Inti pengetahuan utama

1. DeviceMotionEvent
Ini ialah peristiwa penderiaan graviti yang disokong oleh HTML5 Untuk dokumentasi, sila lihat: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Pengenalan acara:
orientasi peranti Menyediakan maklumat orientasi fizikal peranti, dinyatakan sebagai satu siri sudut putaran sistem koordinat setempat.
devicemotion Menyediakan maklumat pecutan untuk peranti, dinyatakan sebagai koordinat cardi dalam sistem koordinat yang ditakrifkan pada peranti. Ia juga menyediakan kadar putaran peranti dalam sistem koordinat. Jika boleh, acara itu harus memberikan maklumat pecutan di pusat graviti peranti.
compassneedscalibration digunakan untuk memberitahu tapak web untuk menentukur acara di atas menggunakan maklumat kompas.

2. Pengenalan acara
window.addEventListener("deviceorientation",function(event){// handle event.alpha, event.beta and event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0};

Salin selepas log masuk

Ini ialah parameter yang dikembalikan oleh acara orientasi peranti Untuk mendapatkan penunjuk kompas, anda boleh menggunakan 360 darjah tolak alfa. Jika ia selari dengan permukaan mendatar, penunjuk kompasnya ialah (360 - alpha). Jika pengguna memegang peranti, skrin berada dalam satah menegak dengan bahagian atas skrin menghala ke atas. Nilai beta ialah 90, dan alfa tiada kaitan dengan gamma. Pengguna memegang peranti dan menghadap sudut alfa Skrin berada dalam skrin menegak dan bahagian atas skrin menghala ke kanan

{alpha:270- alpha,
 beta:0,
 gamma:90};

Salin selepas log masuk

Daftar penerima acara devicemotion:

Salin kod Kod adalah seperti berikut:

window.addEventListener("devicemotion",function(event){// Proses acara. pecutan, event.accelerationIncludingGravity, // event.rotationRate dan event.interval}, true);

Letakkan peranti pada kenderaan, dengan skrin pada satah menegak, dengan bahagian atas menghadap ke atas, menghadap ke belakang kenderaan. Kenderaan itu bergerak pada kelajuan v dan membelok ke kanan dengan jejari r. Peranti merekodkan pecutan dan pecutanTermasukGraviti pada kedudukan x, dan peranti juga merekodkan nilai negatif rotationRate.gamma:

{acceleration:{x: v^2/r, y:0, z:0},
 accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},
 rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}};

Salin selepas log masuk

Pelaksanaan fungsi

if(window.DeviceMotionEvent){
 window.addEventListener('devicemotion', YaoYiYao,false);
 }
 var speed =30;//speed
 var x = y = z = lastX = lastY = lastZ =0;
 function YaoYiYao(eventData){
 var acceleration =eventData.accelerationIncludingGravity;
 x = acceleration.x;
 y = acceleration.y;
 z = acceleration.z;
 if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){
 //简单的摇一摇触发代码
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 }

Salin selepas log masuk

Tentukan dahulu sama ada penyemak imbas menyokong acara ini.

YaoYiYao digunakan untuk mengesan sama ada telefon mudah alih digoncang secara khusus, ia memperoleh data pergerakan telefon mudah alih dan menyimpannya dalam pembolehubah luaran Apabila peristiwa gegaran dicetuskan pada kali seterusnya, ia menentukan sama ada koordinat gegaran terakhir dan koordinat gegaran semasa. berada dalam kedudukan yang sama dengan julat yang kerap digerakkan: Math.abs(x-lastX)> kelajuan ||Math.abs(y-lastY)> Pada asasnya, jika syarat ini dipenuhi, telefon berada dalam keadaan bergegar Cuma tambah kod gegaran yang anda ingin laksanakan dalam pernyataan if.

Di atas adalah idea pelaksanaan fungsi goncang HTML5 saya harap ia akan membantu pembelajaran semua orang.