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()  // 關閉全屏

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM