控制手机震动demo【引】

最新推荐文章于 2023-12-13 20:08:40 发布
阿潺
最新推荐文章于 2023-12-13 20:08:40 发布
阅读量1.6k
点赞数
<!DOCTYPE html>
<!-- saved from url=(0028)http://zxycc.cc/demo/h5test/ -->
<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>null</p>
        <p id="devicemotions">acceleration:<br>null<br>null<br>null</p>
        <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+'<br>'+         
            event.beta+"<br>"+
            event.gamma+'<br>';
            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:<br>"+  
    eventaccelerationIncludingGravity.x+"<br>"+  
    eventaccelerationIncludingGravity.y+"<br>"+
    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:<br>'+
    eventrotationRate.alpha+'<br>'+
    eventrotationRate.beta+"<br>"+
    eventrotationRate.gamma
}, false);
*/
window.addEventListener("devicemotion", function(event) {
    var eventacceleration = event.acceleration;
    document.querySelector('#devicemotions').innerHTML = "acceleration:<br>"+
    eventacceleration.x+"<br>"+
    eventacceleration.y+"<br>"+
    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>