Maison > interface Web > js tutoriel > Apprenez l'API JavaScript de vibration des téléphones mobiles

Apprenez l'API JavaScript de vibration des téléphones mobiles

coldplay.xixi
Libérer: 2020-07-07 16:09:51
avant
2983 Les gens l'ont consulté

Apprenez l'API JavaScript de vibration des téléphones mobiles

Les nouvelles API fournies dans les navigateurs modernes s'orientent de plus en plus vers les applications de téléphonie mobile plutôt que vers les applications de bureau traditionnelles, telles que l'API d'informations de géolocalisation JavaScript. Une autre API JavaScript destinée uniquement aux applications mobiles est l'API Vibration. Évidemment, cette API permet aux programmeurs mobiles d'utiliser JavaScript pour appeler la fonction de vibration du téléphone et définir la méthode et la durée de la vibration.

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

Déterminer la prise en charge par le navigateur de l'API de vibration

Une bonne habitude Vérifiez simplement si votre environnement d'application et votre navigateur actuels prennent en charge l'API de vibration avant de l'utiliser. Voici la méthode de détection :

// Standards ftw!
var supportsVibrate = "vibrate" in navigator;
Copier après la connexion

Il n'y a qu'une seule API sur les vibrations dans l'objet window.navigator : vibrate.

Application de base de l'API Vibration

Cette navigator.vibrate fonction peut accepter un paramètre numérique ou un tableau numérique. Lors de l'utilisation de paramètres de tableau, la valeur impaire est le nombre de secondes de vibration, et. le nombre pair est Les bits sont le nombre de secondes à attendre.

// 振动1秒
navigator.vibrate(1000);

// 振动多次
// 参数分别是震动3秒,等待2秒,然后振动1秒
navigator.vibrate([3000, 2000, 1000]);
Copier après la connexion

Si vous souhaitez arrêter de vibrer, il vous suffit de passer 0 ou un tableau vide à la méthode navigator.vibrate :

// 停止振动
navigator.vibrate(0);
navigator.vibrate([]);
Copier après la connexion

A noter que l'appel à la navigator.vibrate La méthode ne fera pas vibrer le téléphone de manière cyclique ; lorsque le paramètre est un nombre, la vibration se produira une fois puis s'arrêtera. Lorsque le paramètre est un tableau, la vibration vibrera en fonction de la valeur du tableau, puis cessera de vibrer.

Vibration continue

Nous pouvons simplement utiliser les méthodes setInterval et clearInterval pour produire l'effet de faire vibrer le téléphone en continu :

var vibrateInterval;

// Starts vibration at passed in level
function startVibrate(duration) {
	navigator.vibrate(duration);
}

// Stops vibration
function stopVibrate() {
	// Clear interval and stop persistent vibrating 
	if(vibrateInterval) clearInterval(vibrateInterval);
	navigator.vibrate(0);
}

// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPeristentVibrate(duration, interval) {
	vibrateInterval = setInterval(function() {
		startVibrate(duration);
	}, interval);
}
Copier après la connexion

Le code ci-dessus est uniquement pour les vibrations Lorsque le paramètre est un nombre, si le paramètre est un tableau, vous devez également calculer sa durée totale, puis boucler en fonction de ses caractéristiques.

Scénarios d'utilisation de l'API Vibration

Cette API est évidemment destinée aux appareils de téléphonie mobile. Lors du développement d'applications mobiles WEB mobiles, c'est un bon outil d'alerte. Lors du développement de jeux Web ou d'applications multimédia, cette fonction de vibration est une technologie indispensable. Par exemple, lorsqu'un utilisateur joue à votre jeu WEB sur un téléphone mobile, qu'une explosion se produit dans le jeu et que vous faites vibrer le téléphone mobile avec, est-ce une excellente expérience utilisateur ?

Que pensez-vous de cette API de vibration JavaScript ? Pensez-vous qu’il deviendra rapidement populaire ? Ça ne sert toujours pas à grand-chose ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:webhek.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal