控制手机震动demo【引】



<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title>title>
        <style type="text/css">
            body{
                height: 100%;
                background: url(img/bg-body2.jpg) no-repeat center top;
                background-size: cover;
            }
            .snow {
                width: 100%;
                height: 100%;
                background-size: cover;
                transform: translate3d(0px, 0px, 0px);
                transform-style: preserve-3d;
                backface-visibility: hidden;
                position: absolute;
                display: block;
                left: 0px;
                top: 0px;
            }
            .snow1{
                background: url(img/snow1.png) no-repeat 0 0;
            }
            .snow2{
                background: url(img/snow2-1.png) no-repeat 0 0;
            }
            .snow3{
                background: url(img/snow2-2.png) no-repeat 0 0;
            }
            .snow4{
                background: url(img/snow2-3.png) no-repeat 0 0;
            }
            .box{
                position: absolute;
                top: 50%;
                z-index: 2;
            }
            #num{
                height: 40px;
                font-size: 20px;
                display: block;
            }
            .btn{
                height: 40px;
                line-height: 40px;
            }



            .garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}
        style>
    head>
    <body>
        <div class="garden">
  <div class="ball">div>
div>

<pre class="output">pre>
        <div class="snow snow1">div>
        <div class="snow snow2">div>
        <div class="snow snow3">div>
        <div class="snow snow4">div>
        <p id="deviceorientation">null<br>null<br>null<br>p>
        <p id="devicemotion">accelerationIncludingGravity:<br>null<br>null<br>nullp>
        <p id="devicemotions">acceleration:<br>null<br>null<br>nullp>
        <div class="box">
            <input type="text" name="num" id="num" value="">
            <button class="btn">控制手机震动button>
        div>
        <script type="text/javascript">
        var snow = document.querySelectorAll(".snow");    
        window.addEventListener("deviceorientation", function(event) {//设备方向信息 
            document.querySelector('#deviceorientation').innerHTML =     
            event.alpha+'
'
+ event.beta+"
"
+ event.gamma+'
'
; for (var i = 0; i < snow.length; i++) { snow[i].style.top = event.beta+"px"; snow[i].style.left = event.gamma+"px"; } /*snow.forEach(function(a){ a.style.top = event.gamma+"px"; a.style.left = event.beta+"px"; //a.style.backgroundPosition = event.beta+"px "+event.gamma+"px"; });*/ }, false); window.addEventListener("devicemotion", function(event) {//加速度改变时触发 console.log(event) eventaccelerationIncludingGravity = event.accelerationIncludingGravity; document.querySelector('#devicemotion').innerHTML = "accelerationIncludingGravity:
"
+ eventaccelerationIncludingGravity.x+"
"
+ eventaccelerationIncludingGravity.y+"
"
+ eventaccelerationIncludingGravity.z; /*for (var i = 0; i < snow.length; i++) { snow[i].style.top = eventaccelerationIncludingGravity.y*10+"px"; snow[i].style.left = eventaccelerationIncludingGravity.x*10+"px"; }*/ }, false); /*window.addEventListener("devicemotion", function(event) { eventrotationRate = event.rotationRate; document.querySelector('#devicemotion').innerHTML = 'rotationRate:
'+ eventrotationRate.alpha+'
'+ eventrotationRate.beta+"
"+ eventrotationRate.gamma }, false); */
window.addEventListener("devicemotion", function(event) { var eventacceleration = event.acceleration; document.querySelector('#devicemotions').innerHTML = "acceleration:
"
+ eventacceleration.x+"
"
+ eventacceleration.y+"
"
+ eventacceleration.z }, false); var btn = document.querySelector(".btn"); var num = document.querySelector("#num"); btn.addEventListener("touchstart",function(){//touchstart&click if(!num.value){ alert("请输入时间,单位是秒!") }else{ navigator.vibrate = navigator.vibrate //震动 || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; navigator.vibrate(num.value*1000); //ms } },false) var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; var type = connection.type; function updateConnectionStatus() { alert("网络由 " + type + " 变化为 " + connection.type); } //监听网络类型发生变化 connection.addEventListener('typechange', updateConnectionStatus); var ball = document.querySelector('.ball'); var garden = document.querySelector('.garden'); var output = document.querySelector('.output'); var maxX = garden.clientWidth - ball.clientWidth; var maxY = garden.clientHeight - ball.clientHeight; function handleOrientation(event) { var x = event.beta; // In degree in the range [-180,180] var y = event.gamma; // In degree in the range [-90,90] output.innerHTML = "beta : " + x + "\n"; output.innerHTML += "gamma: " + y + "\n"; // Because we don't want to have the device upside down // We constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // To make computation easier we shift the range of // x and y to [0,180] x += 90; y += 90; // 10 is half the size of the ball // It center the positioning point to the center of the ball ball.style.top = (maxX*x/180 - 10) + "px"; ball.style.left = (maxY*y/180 - 10) + "px"; } window.addEventListener('deviceorientation', handleOrientation); --摇一摇demo--> var SHAKE_THRESHOLD = 800; var last_update = 0; var x, y, z, last_x, last_y, last_z; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update)> 300) { 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) { alert("shaked!"); } last_x = x; last_y = y; last_z = z; } }
script> body>html>

你可能感兴趣的:(控制手机震动demo【引】)