shakeroll.html


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shakeroll!!</title>
</head>
<body>
<span>摇一摇roll点！！</span>
<div id="dmEvent"></div>
<div id="inputDiv"></div>
<script>
var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
var count = 0;
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;

        if (speed > SHAKE_THRESHOLD) {
            createInput();
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion',deviceMotionHandler,false);
} else {
    document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}

function createInput() 
   { 
    var inputdiv = document.getElementById("inputDiv"); 

    var br = document.createElement("br"); 
    inputdiv.appendChild(br); 
    var input1 = document.createElement("input"); 
    input1.setAttribute("type", "text"); 
    input1.setAttribute("disabled", "true");
	input1.setAttribute("value", Math.floor(Math.random()*101)); 
    inputdiv.appendChild(input1); 
   } 
</script>
</body>
</html>