首页 > 其他分享 >H5 陀螺仪

H5 陀螺仪

时间:2023-07-30 13:22:46浏览次数:33  
标签:陀螺仪 值为 H5 beta 手机 alpha gamma

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="main"></div>
  <script>
    // 陀螺仪,只有带有陀螺仪的设备才支持体感
    // 苹果设备的页面只有在https的协议情况下才能使用这些接口
    /**
     * event的参数
     * alpha:指北(指南针)[0, 360) 当为0时指北。 180指南
     * beta:平放的时候beta值为0。如果将手机立起来(短边接触桌面),直立的时候beta为90.
     * gamma:平放的时候gamma值为0。如果将手机立起来(长边接触桌面),直立的时候beta为90.
     */
    window.addEventListener("deviceorientation", (e) => {
      document.getElementById("main").innerHTML = `alpha:${e.alpha}\n beta:${e.beta}\n gamma:${e.gamma}`
    })

    /**
     * 在手机中测试
     * 1. 手机和电脑在同一个局域网下
     * 2. 获取电脑的局域网ifconfig | grep "inet"
     * 3. 在手机上输入相应的ip和端口进行访问。
     */
  </script>
</body>

</html>

标签:陀螺仪,值为,H5,beta,手机,alpha,gamma
From: https://www.cnblogs.com/bingquan1/p/17591323.html

相关文章

  • H5 页面刷新404
    参考:https://blog.csdn.net/weixin_44917334/article/details/129387658history模式由createWebHistory改为createWebHashHistoryimport{createRouter,createWebHistory,createWebHashHistory}from'vue-router'importHomeViewfrom'../views/HomeView.......
  • 移动端H5适配方案 (flexible.js +rem)
    一、flexible.jshttps://github.com/amfe/lib-flexible默认把当前屏幕划分10等份二、vscodecssrem插件(把px转换为rem)可以设置font-size大小easyless(保存.less文件后,自动生成对应的.css文件)三、示例//index.less//当屏幕超过750px时,强制把html字体大小改为75px......
  • 易基因:m6A-seq等揭示RBM33参与调控m6A去甲基化酶ALKBH5活性及其底物选择性
    大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。RNA结合蛋白(RNA-bindingprotein,RBP)是一类结构和功能多样化的蛋白质,参与多种生物过程。越来越多的证据表明,RBP通过调控编码或非编码RNA的可变剪接、转运、稳定性、降解和翻译,在基因表达的转录后调控中发挥着关键作用,......
  • 九州八荒录H5游戏详细图文架设教程
    前言这次给大家带来一款丧心病狂的超变版仙侠H5游戏,九州八荒录H5,变态到什么程度呢?各种宝物升级到上万阶,还没有达到上限,战力也突破到了千万亿,只有你够肝,榜一大佬指日可待!本文讲解九州八荒录游戏架设教程,想研究H5游戏如何实现,体验游戏中秒天秒地秒空气的一定不要错过。我架......
  • H5在线CAD前端使用mxdraw和mxcad库预览编辑DWG图纸
    mxdraw前端库预览图纸mxdraw的作用就是预览图纸,也可以绘制一些批注或者其他图形,首先进行安装,如果你没有前端工程化的基础,请先看前端工程化基础知识,mxdraw有详细的文档,建议点击mxdraw查看使用说明,然后我们讲一下转换后的图纸用mxdraw库显示的步骤:1)新建工程这里我们就用vite......
  • hls协议下支持h.265视频web/H5播放方案
    一般我们播放本地视频都是使用video标签,但是<video>元素只支持三种视频格式:MP4、WebM、Ogg,对于在线视频直接使用video是没法播放的,这里介绍一款做播放在线监控视频功能时使用过的一款播放器。先介绍几个概念:流协议:流协议就是在两个通信系统之间传输多媒体文件的一套规则,它定义了......
  • H5页面中调用微信和支付宝支付
    第一步:先判断当前环境判断用户所属环境,根据环境不同,执行不同的支付程序。if(/MicroMessenger/.test(window.navigator.userAgent)){//alert('微信');}elseif(/AlipayClient/.test(window.navigator.userAgent)){//alert('支付宝......
  • H265格式兼容各个浏览器网页web端H5播放方案
    可能有很多朋友会遇到H265格式的视频流无法播放,毕竟现在很多相机都支持h265了,确实有很多优点,但是它最大的问题就是很多浏览器无法播放,也有部分浏览器能够兼容h265,但是总不能让用户指定浏览器使用吧,下面来说说怎么兼容各个浏览器播放无非两种方案,第一种就是使用ffmpeg进行转码,这种方......
  • CH592 IWDG独立看门狗
    独立看门狗(IWDG)由专用的内部低速时钟(LSI)驱动,能够在低功耗模式下正常工作。 根据寄存器描述,IWDG最大时间可以是(0xFFF/(32K/512))=65.52s代码如下:#defineFEED_IWDG(){R32_IWDG_KR=0xAAAA;}//需要定时调用喂狗看门狗初始化voidIWDG_Enable(){R32_IWDG_KR=0......
  • 初入 H5 Canvas 框架 Konva.js
    什么是KonvaKonva.js是一个H5Canvas的JavaScript框架,我们可以通过制作桌面端和移动端的apps。Konva支持动画、转换、节点嵌套、图层、过滤、缓存、事件(桌面端和移动端)等。在Konva中,所有的图形都存在于stage中,即便是你的app使用了成百上千的shapes(图形)也可以在s......