手机浏览器,用js能干什么

154 阅读1分钟

手机浏览器,用js能干什么

<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="referrer" content="always">
        <meta name="csdn-baidu-search" content="{&quot;autorun&quot;:true,&quot;install&quot;:true,&quot;keyword&quot;:&quot;h5页面在手机中调用拨打电话功能 - 小白阿里里的博客&quot;}">
        <title>h5页面在手机中调用拨打电话功能 - 小白阿里里的博客 - CSDN博客</title>
 
 
</head>
 <body>
<a href="mailto:18354393241@163.com">发送邮件</a>
 <br>

<a href="tel:18354393241">拨打手机18354393241</a> 
 <br>
<a href="sms:18354393241">发送短信</a>
 <br> 
  <label>照相机</label>
  <input type="file" id='image' accept="image/*" capture='camera'>
  <br>
  <label>摄像机</label>
  <input type="file" id='video' accept="video/*" capture='camcorder'>
  <br>
<label>上传文件</label> 
<input type="file" name="">
  <br>
 <label>录音</label>
 <input type="file" accept="audio/*" capture="microphone"> 
  <br>
7、调用 定位,获取坐标 :参考 https://blog.csdn.net/qq_34690340/article/details/79388775 (亲测有效)
 
<script>
    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();
  </script> 
 <br>
8、调用 震动 :参考 
 <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<div class="shock"   style="    background: #00BCD4;   height: 50px;">按我手机会震动</div>
<script>
   //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();
	</script>
	
 <br>
9、调用 加速器(摇一摇):参考 

 
<script>
    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("你的设备不支持摇晃感应");
    }
</script>
 <br>
10、H5调用浏览器全凭的接口: 
 
document.documentElement.webkitRequestFullscreen()  //  开启 整个网页全屏

document.webkitExitFullscreen()  // 关闭全屏
 </body>