How to use jQuery and HTML5 to achieve the special effect of changing clothes by shaking your phone

We often use WeChat to find people nearby, which is achieved by shaking the phone on the app. Now, we have moved this technology to the mobile web for everyone to learn. Friends in need can refer to it.

Shaking your phone can be used in many scenarios, such as shaking to change lottery draws, shaking to search for songs, etc. In this article, I will introduce to you how to use HTML5 PHP jQuery to achieve the effect of changing clothes by shaking your mobile phone.

Note that this is an article about the comprehensive application of WEB knowledge. The prerequisite for reading this article is that you need to have basic knowledge of HTML5, jQuery, PHP, MySQL and other related aspects.

HTML

My page displays product information by default (a certain brand of dress product pictures and text descriptions). Of course, in actual applications, it can be obtained from the database Get product information.

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

Then load the jQuery library file in the page, and we continue to use the previous article: "Using HTML5 to implement the function of shaking the phone The code used in the tutorial to listen to the shaking of the phone: shake.js.

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

jQuery

We use shake.js to detect that the user’s phone is shaking. When shaking occurs, the function shakeEventDidOccur() is called to send an Ajax request to the background product.php. The background program will return the corresponding JSON data based on the submitted request parameters. We display the corresponding product pictures and text information based on the returned data to achieve the effect of changing clothes.

 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

Backend product.php receives the parameter id submitted by ajax , query the data information other than the current ID in the database, obtain the corresponding data set results, and then randomly take out a set of data from the data set (because only one piece of data information is displayed at a time), and return it to the front-end call in JSON format, please see 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); 
?>

Of course, this article is just an example application. During development, you can optimize the PHP program code according to the actual application to create high-quality PHP that suits your project. Code, and finally the mysql data table structure:

 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');

The above is the entire content of this article, I hope it will be helpful to everyone's learning, more Please pay attention to the PHP Chinese website for related content!

Related recommendations:

html5 implements parsing of players compatible with major browsers

HTML discount calculation price Implementation principle and script code

The above is the detailed content of How to use jQuery and HTML5 to achieve the special effect of changing clothes by shaking your phone. For more information, please follow other related articles on the PHP Chinese website!