Comment utiliser jQuery et HTML5 pour obtenir l'effet spécial de changer de vêtements en secouant votre téléphone

Nous utilisons souvent WeChat pour trouver des personnes à proximité, ce qui se fait en secouant le téléphone sur l'application. Nous avons désormais transféré cette technologie sur le Web mobile pour que tous les amis dans le besoin puissent s'y référer.

Secouer votre téléphone peut être utilisé dans de nombreux scénarios, comme secouer pour gagner des prix, secouer pour rechercher des chansons, etc. Dans cet article, je vais vous présenter comment utiliser HTML5+PHP+jQuery pour obtenir l'effet de changer de vêtements en secouant votre téléphone portable.

Notez qu'il s'agit d'un article sur l'application complète des connaissances WEB. La condition préalable pour lire cet article est que vous devez avoir des connaissances de base en HTML5, jQuery, PHP, MySQL et d'autres aspects connexes.

HTML

Ma page affiche des informations sur le produit (une certaine marque de photos de produits vestimentaires et des descriptions textuelles) par défaut. applications, il peut être obtenu à partir de la base de données Obtenir des informations sur le produit.

 <p id="pro" rel="1"> 
 <p>使劲晃动您的手机</p> 
 <img src="images/z1.jpg" width="300" height="300"> 
 <p>灰色</p> 
</p>

Chargez ensuite le fichier de la bibliothèque jQuery dans la page, et en même temps on continue à utiliser l'article précédent : "Utiliser HTML5 pour implémenter le tremblement du téléphone mobile Le code utilisé pour écouter le tremblement du téléphone dans "Tutoriel sur les fonctions" : shake.js.

 <script src="jquery.js"></script> 
<script src="shake.js"></script>

jQuery

Nous utilisons shake.js pour détecter que l'utilisateur le téléphone tremble, lorsque des secousses se produisent, appelez la fonction shakeEventDidOccur() pour envoyer une requête Ajax en arrière-plan product.php, et le programme d'arrière-plan renverra les données JSON correspondantes en fonction des paramètres de requête soumis. Nous affichons les images du produit correspondantes et les informations textuelles en fonction des données renvoyées pour obtenir l'effet de changer de vêtements.

 window.onload = function() { 
 var myShakeEvent = new Shake({ 
  threshold: 15 
 }); 
 
 myShakeEvent.start(); 
 
 window.addEventListener('shake', shakeEventDidOccur, false); 
 
 function shakeEventDidOccur () { 
  var pro_id = $("#pro").attr("rel"); 
  $.getJSON("product.php?id="+pro_id,function(json){ 
   if(json.msg==1){ 
    $("#pro").attr("rel",json.pro.id) 
    .html(&#39;<img src="images/&#39;+json.pro.pic+&#39;" width="300" height="300"><p>&#39;+json.pro.color+&#39;</p>&#39;); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
};

PHP

L'arrière-plan product.php est soumis en fonction de la réception ajax ID de paramètre, interrogez les informations de données autres que l'identifiant actuel dans la base de données, obtenez les résultats de l'ensemble de données correspondant, puis extrayez aléatoirement un ensemble de données de l'ensemble de données (car une seule information de données est affichée à la fois ), et renvoyez-le à l'appel front-end au format JSON Veuillez regarder le code :

 <?php 
//连接数据库 
include_once("connect.php"); 
 
$id = intval($_GET[&#39;id&#39;]); 
if($id==0) exit; 
//查询数据 
$query = mysql_query("select * from dress where id!=&#39;$id&#39;"); 
$total = mysql_num_rows($query); 
$arr = array(); 
if($total==0){ 
 $arr[&#39;msg&#39;] = &#39;没有足够的衣服！&#39;; 
}else{ 
 $arr[&#39;msg&#39;] = 1; 
 while($row=mysql_fetch_array($query)){ 
  $pros[] = array( 
   &#39;id&#39; => $row[&#39;id&#39;], 
   &#39;color&#39; => $row[&#39;color&#39;], 
   &#39;pic&#39; => $row[&#39;pic&#39;] 
  ); 
 } 
 //随机取一组数据 
 $arr[&#39;pro&#39;] = $pros[array_rand($pros)]; 
} 
//输出JSON格式数据 
echo json_encode($arr); 
?>

Bien sûr, cet article. n'est qu'un exemple d'application. Pendant le développement, vous pouvez optimiser le code du programme PHP en fonction de l'application réelle pour créer un système adapté à vos besoins. Le code PHP de haute qualité du projet, et enfin la structure de la table de données mysql : <🎜. >

 CREATE TABLE IF NOT EXISTS `dress` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `color` varchar(30) NOT NULL, 
 `pic` varchar(30) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ; 
 
INSERT INTO `dress` (`id`, `color`, `pic`) VALUES 
(1, '灰色', 'z1.jpg'), 
(2, '紫色', 'z2.jpg'), 
(3, '红色', 'z3.jpg'), 
(4, '蓝色', 'z4.jpg');

Ce qui précède est tout le contenu de cet article, j'espère que vous pourrez en tirer des leçons. Utile, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

html5 implémente l'analyse des joueurs compatibles avec les principaux navigateurs

Prix de calcul de remise HTMLPrincipe de mise en œuvre et script code

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!