HTML5 and CSS3 development experience

first, deviceorientation events to achieve shake-shake functionThe Devicemotion event provided by the Deviceorientation feature encapsulates the motion sensor time of the device, which can be used to obtain data on the device's motion state, acceleration, etc. (there are also deviceorientation events that provide a device perspective, orientation, etc.).

Devicemotion: Device Sensor eventaccelerationincludinggravity:Gets the device acceleration information (returns the x, Y, Z axes).

Accelerationincludinggravity: Returns the acceleration information for the device, X, y, Z axis

1<script>2     varShake_threshold = -;3     varLast_update =0;4     varx = y = z = last_x = last_y = Last_z =0;5 6     if(window. Devicemotionevent) {7 8         //The Devicemotion event event encapsulates the device's motion sensor time, which can be used to obtain the device's motion status, acceleration and other data (as well as the Deviceorientation event to provide information such as device angle, orientation, etc.). 9Window.addeventlistener ('devicemotion', Devicemotionhandler,false);Ten}Else { OneAlert'This device does not support Devicemotion events'); A     } -  - function Devicemotionhandler (eventData) { the         varAcceleration = eventdata.accelerationincludinggravity;//back to get device acceleration information, x, y, Z axis -         varCurtime =NewDate (). GetTime (); -         if((curtime-last_update) > -) { -             varDifftime = Curtime-last_update; +Last_update =Curtime; -x =acceleration.x; +y =ACCELERATION.Y; Az =acceleration.z; at             varSpeed = Math.Abs (x + y + z-last_x-last_y-last_z)/difftime *10000; -             varStatus = document.getElementById ("Status"); -             if(Speed >shake_threshold) { -                 varText ="x:"+x+"<br/>y:"+y+"<br/>z:"+z+"<br/>speed:"+Speed ; -status.innerhtml =text; -             } in  -last_x =x; toLast_y =y; +Last_z =Z; -         } the     } *</script>

second, the animation listens to the event

CSS3 listen for animations after the end of the animation,

1. Transitionend: Animations for transition properties

2. Webkitanimationend: Animations for animation properties

1<script>2$(". Box"). Click (function () {3$( This). AddClass (" on");4$( This)[0].addeventlistener ("Transitionend", function () {5$(". Box"). Removeclass (" on");6},false);7     })8</script>

Iii. Common Events

1, Window.scrollto (0,0); Hide the Address bar

2, Window.matchmedia (); Match Media

3, Navigator.connection; Determine if the phone is running on a network such as wifi/3g

4, Window.devicepixelratio; Determine screen resolution (IPhone 4 value is 2, and Nexus One value is 1.5)

5, Window.navigator.onLine; Get Network Connection Status

6, Window.navigator.standalone; Determine if the iphone is in full-screen mode

7. Touch Event (IOS, Android 2.2+): Touchstart, Touchmove, Touchend, Touchcancel

8. Gesture event (Apple only, IOS): Gesturestart, Gesturechange, gesturend give access to predefined gestures (rotation, SC Ale, Position)

Window.addeventlistener ("Orientationchange", function (e) {//window.orientation (0 is portrait, and and-90 is landscape) }, False); Window.addeventlistener ("Deviceorientation", function (e) {//e.alpha//e.beta//e.gamma}, False); Window.addeventlistener ("Devicemotion", function (e) {//e.accelerationincludinggravity.x// E.accelerationincludinggravity.y//e.accelerationincludinggravity.z}, False);

9, Requestanimationframe (); New animation functions

10, Element.webkitrequestfullscreen (); Call Full-screen function

HTML5 and CSS3 development experience