In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
This article will explain in detail how to achieve Wechat shake function through html5 DeviceOrientation. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.
In HTML5, the DeviceMotion event provided by the DeviceOrientation feature encapsulates the motion sensor time of the device, and the data such as motion state and acceleration of the device can be obtained by changing the time (and the deviceOrientation event provides information such as device angle, orientation, etc.).
Through the judgment of the moving state of the equipment by DeviceMotion, it can help us to achieve the interactive effect of "shaking" on the web page.
Sports event monitoring
The code is as follows:
If (window.DeviceMotionEvent) {window.addEventListener ('devicemotion', deviceMotionHandler, false);} else {alert (' your phone is too bad, buy a new one') ;}
Get acceleration information
The action of "shaking" is that the equipment has a certain distance in a certain period of time, so by monitoring the change rate of the x, y, z values obtained in the previous step in a certain time range, we can judge whether the equipment is shaking or not. In order to prevent the miscalculation of normal movement, it is necessary to set an appropriate critical value for the rate of change.
The code is as follows:
Function deviceMotionHandler (eventData) {var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date (). GetTime (); if ((curTime-last_update) > 100) {var diffTime = curTime-last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z Var speed = Math.abs (x + y + z-last_x-last_y-last_z) / diffTime * 10000; var status = document.getElementById ("status"); if (speed > SHAKE_THRESHOLD) {doResult ();} last_x = x; last_y = y; last_z = z }}
The effect is shown in the figure:
About how to achieve Wechat shake function through html5 DeviceOrientation to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.