Shulou(Shulou.com)06/02 Report--

HTML5+PHP+jQuery how to shake the phone to change clothes, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Shaking the phone can be applied to many situations, such as shaking for raffle, shaking and searching songs, etc. I will show you how to use HTML5+PHP+jQuery to achieve the effect of shaking and changing your phone.

Note that this is an article on 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

Product information (pictures and text descriptions of a brand dress) is displayed by default on my page, of course, product information can be obtained from the database in practical application.

Shake your phone hard

Grey

Then load the jQuery library file on the page, while we continue to use the code used in the previous article, "gravity and orientation sensing applications for HTML5 phones-shake effects," to listen for phone shaking: shake.js.

JQuery

We use shake.js to detect the shaking of the user's phone. When the shaking occurs, we call the function shakeEventDidOccur () to send an Ajax request to the background product.php, and the background program will return the corresponding JSON data according to the submitted request parameters. We display the corresponding product pictures and text messages according to the returned data, and 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 ('

'+ json.pro.color+'

');} else {alert (json.msg);}});}}

PHP

According to the parameter id submitted by ajax, the backend product.php queries the data information in the database except the current id, obtains the corresponding dataset result, and then randomly fetches a group of data from the dataset (because only one piece of data information is displayed at a time) and returns it to the frontend call in JSON format. Please see the code:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.