Accès aux appareils HTML5 Explication détaillée de l'accès aux appareils

Adresse de référence

Utilisant principalement input type=file, accept=image/* pour le traitement

Méthodes d'aperçu d'image (deux types)

 const file = e.target.files[0]//Méthode 1 const url1 = window.URL.createObjectURL(file);let url2//Méthode 2 const reader = new FileReader();reader.onload = (e) => { url2 = e.target.result;};reader.readAsDataURL(file);

Adresse de référence

1. démarrage tactile
2. touché
3. touchcancel est déclenché par des événements plus avancés tels que l'accès au téléphone ou des informations contextuelles, et constitue généralement une opération de sauvegarde.
4. toucherdéplacer
5. géolocalisation

Adresse de référence

Notez que Google Chrome nécessite https pour fournir des services de localisation.

 if (navigator.geolocation){ navigator.geolocation.getCurrentPosition((position) => { this.geolocation = `latitude:${position.coords.latitude},longitude:${position.coords.longitude}` }, (err ) => { console.log(err); {enableHighAccuracy : true, maximumAge : 30000, // mémoire tampon timre timeout : 27000 // temps d'attente }) } else { alert('géolocalisation non prise en charge !') }

Adresse de référence

 window.addEventListener('deviceorientation',(doe) => { this.absolute = doe.absolute //false signifie que les données d'orientation sont fournies par le système de coordonnées de l'appareil this.alpha = doe.alpha //autour de l'axe Z 0-360 lors de la saisie La direction horizontale du téléphone mobile est 0 ou 360 this.beta = doe.beta // Autour de l'axe X -180~180 décrit la rotation d'avant en arrière this.gamma = doe.gamma // Description de la rotation de gauche à droite autour de l'axe Y -90~90}, true) // chrome v65 ne prend en charge que l'accélérationIncludingGravity et l'intervalle (il ne devrait pas être trouvé en raison de certaines restrictions), et les dernières versions de les autres navigateurs prennent essentiellement en charge window. addEventListener('devicemotion', (dme) => { this.acceleration = dme.acceleration this.accelerationIncludingGravity = dme.accelerationIncludingGravity this.rotationRate = dme.rotationRate this.interval = dme.interval }, false)

Adresse de référence

 <button onclick=lockPointer();>Verrouillez-le !</button> <div id=pointer-lock-element style=width:500px;height:500px;background-color: red></div>

 // Exemple simple, verrouillez la souris à l'intérieur de l'élément pointer-lock-element let = document.getElementById(pointer-lock-element); document.addEventListener(mousemove, function(e) { var mouvementX = e.movementX mouvementY = e. mouvementY //Imprimer la valeur incrémentielle du mouvement de la souris console.log(X= + mouvementX, Y= + mouvementY }, false); elem = document.getElementById(pointer-lock-element); elem.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock ||

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.