HTML5 手机摇一摇

作者：admin来源：网络浏览：次时间：2020-09-30 00:07:50我要评论

导读：HTML 5 手机摇一摇，在手机上运行的。

HTML5 手机摇一摇

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

<title>HTML5 手机摇一摇-www.bcty365.com</title>

<script type="text/javascript">

var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');

if(window.DeviceMotionEvent) {

    var speed = 25;

    var x = y = z = lastX = lastY = lastZ = 0;

    window.addEventListener('devicemotion', function(){

        var acceleration =event.accelerationIncludingGravity;

        x = acceleration.x;

        y = acceleration.y;

        if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {

            document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];

        }

        lastX = x;

        lastY = y;

    }, false);

}

</script>

</head>

<body>

HTML 5 手机摇一摇，在手机上运行的。

</body>

</html>