H5 调用 手机设备的功能

1、调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效)

<a href="mailto:johndoe@sample.com">发送邮件</a>

2、调用 拨打手机

<a href="tel:400-888-9999">400-888-9999</a>

3、调用 短信

<a href="sms:10086">发送</a>

3、调用 照相机 : 参考 https://blog.csdn.net/qq_19872525/article/details/81176002(亲测有效,在手机端)

  <label>照相机</label>
  <input type="file" id='image' accept="image/*" capture='camera'>

4、调用 摄像

  <label>摄像机</label>
  <input type="file" id='video' accept="video/*" capture='camcorder'>

5、调用 文件 :相册文件、录音文件、视频文件 等都是属于文件,所以选择文件的方法是一样的

<label>上传文件</label> 
<input type="file" name="">

6、调用 录音 :参考 https://blog.csdn.net/u014575771/article/details/53187143

 <label>录音</label>
 <input type="file" accept="audio/*" capture="microphone"> 

7、调用 定位,获取坐标 :参考 https://blog.csdn.net/qq_34690340/article/details/79388775 (亲测有效)

    var getlocationpoint = function () {
      if (navigator.geolocation){
          navigator.geolocation.getCurrentPosition(
              function (position) {
                 latitude = position.coords.latitude;//获取纬度
                 longitude = position.coords.longitude;//获取经度
                 alert(latitude)
                 alert(longitude)
              });
      }else{
         alert("不支持定位功能");
      }
  }
  getlocationpoint();

8、调用 震动 :参考 https://blog.csdn.net/qq_24147051/article/details/52980515

<div class="shock">按我手机会震动</div>
   //Vibration接口用于在浏览器中发出命令,使得设备振动。
    function vibration() {
      navigator.vibrate = navigator.vibrate
        || navigator.webkitVibrate
        || navigator.mozVibrate
        || navigator.msVibrate;

      if (navigator.vibrate) {
        // 支持
        console.log("支持设备震动!");
      }

      $(".shock").click(function () {
        alert("1111");
        navigator.vibrate([500, 300, 400, 300]);
      });
    }
    vibration();

9、调用 加速器(摇一摇):参考 https://www.2cto.com/kf/201711/698864.html

    const SHAKE_SPEED = 300;
    let lastTime = 0;//上次变化的时间
    let x = y = z = lastX = lastY = lastZ = 0;//位置变量初始化

    function motionHandler(event) {
      let acceleration = event.accelerationIncludingGravity;
      let curTime = Date.now();//取得当前时间
      if ((curTime - lastTime) > 120) {
        let diffTime = curTime - lastTime;
        lastTime = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        //计算摇动速度
        let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
        if (speed > SHAKE_SPEED) {
          alert("你摇动了手机");
        }
        lastX = x;
        lastY = y;
        lastZ = z;
      }
    }
    if (window.DeviceMotionEvent) {
      // 这里的motionHandler函数,在手机端上会一直执行。不知道是不是因为手机对移动太敏感,放到桌子上不动都会触发。
      window.addEventListener('devicemotion', motionHandler, false); 
    } else {
      alert("你的设备不支持位置感应");
    }

10、H5调用浏览器全屏的接口:https://www.jb51.net/article/76695.htm
  谷歌浏览器中:

document.documentElement.webkitRequestFullscreen()  //  开启 整个网页全屏

document.webkitExitFullscreen()  // 关闭全屏

 

posted @ 2018-11-20 16:42  吴飞ff  阅读(3121)  评论(0编辑  收藏  举报