H5 調用 手機設備的功能

一、調用 郵件 : 參考 https://blog.csdn.net/github_38516987/article/details/77637546 (親測有效)html

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

二、調用 撥打手機git

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

三、調用 短信github

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

三、調用 照相機 : 參考 https://blog.csdn.net/qq_19872525/article/details/81176002(親測有效,在手機端)web

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

四、調用 攝像瀏覽器

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

五、調用 文件 :相冊文件、錄音文件、視頻文件 等都是屬於文件,因此選擇文件的方法是同樣的ide

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

六、調用 錄音 :參考 http://www.javashuo.com/article/p-ozufyluh-p.html函數

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

七、調用 定位,獲取座標 :參考 https://blog.csdn.net/qq_34690340/article/details/79388775 (親測有效)spa

    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();

八、調用 震動 :參考 https://blog.csdn.net/qq_24147051/article/details/52980515.net

<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();

九、調用 加速器(搖一搖):參考 https://www.2cto.com/kf/201711/698864.htmlcode

    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("你的設備不支持位置感應");
    }

十、H5調用瀏覽器全憑的接口:https://www.jb51.net/article/76695.htm
  谷歌瀏覽器中:

document.documentElement.webkitRequestFullscreen()  //  開啓 整個網頁全屏

document.webkitExitFullscreen()  // 關閉全屏
相關文章
相關標籤/搜索