极简指南针-手机访问电脑

电脑上写一个指南针的demo，用我们的手机访问这个网页

结构

<!--表盘-->
<div class="wrapper">
    <span>南</span>
    <span>北</span>
    <span>东</span>
    <span>西</span>
</div>
<!--指针-->
<div class="pointer"></div>

样式

.wrapper{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    border-radius: 200px;
    position: absolute;
    top: calc(50% - 200px);
    left:calc(50% - 200px);
}
.pointer{
    width: 4px;
    height: 0px;
    padding-top: 170px;
    position: absolute;
    top: calc(50% - 170px);
    left:calc(50% - 2px);
    background-color: brown;
    border-radius: 2px 2px 2px 2px / 10px 10px 2px 2px;
}
.wrapper span{
    font-size: 12px;
    display: block;
    position: absolute;
}
/*分别调整一下四个字体的位置和旋转角度*/
.wrapper span:nth-of-type(1){
    bottom: 20px;
    left: calc(50% - 6px);
    transform: rotateZ(180deg);
}
.wrapper span:nth-of-type(2){
    top: 20px;
    left: calc(50% - 6px);
}
.wrapper span:nth-of-type(3){
    right: 20px;
    top: calc(50% - 8px);
    transform: rotateZ(90deg);
}
.wrapper span:nth-of-type(4){
    left: 20px;
    top: calc(50% - 8px);
    transform: rotateZ(-90deg);
}

行为

var oDiv = document.getElementsByClassName("wrapper")[0];
window.addEventListener("deviceorientation", function (e) {
    var angle = parseInt(e.alpha) + 180;
    oDiv.style.transform = "rotateZ("+ angle +"deg)"
})

现在我们直接打开网页，发现我们写的JS并没有起到作用，这是因为我们的电脑上没有陀螺仪，无法检测设备方向，但我们的智能手机有。接下来我们需要用手机去访问我们在电脑上写的demo。
第一步：我们需要在电脑上启动一个服务
你也可以通过Java或python启动一个服务，我们这里用node.js。
在电脑上安装node.js。下载地址：http://nodejs.cn/download/
下载完傻瓜式安装就好。安装完毕Win + R输入cmd，打开命令提示符测试一下。输入node -v

在我们项目文件（demo）里新建一个server.js文件

这里的page文件夹放的是我们的页面
打开命令提示符通过 cd 命令切换到我们的项目文件夹下

输入npm install init初始化项目，我们的项目目录会发生一下变化


再输入npm install express --save安装express框架

在我们的server.js文件中

var express = require("express");
var app = new express();
app.use(express.static("./page"));
app.listen(9890);

代码写完了接下来启动服务吧，命令提示符切到server.js文件所在的目录，这里也就是我们的项目文件夹demo。输入node server.js
没什么反应就表示服务已经启动了
第二部：手机访问电脑
首先我们要保证我们的手机和电脑连在同一个私网内（也就是局域网），比如同一个无线路由器下。
然后关闭我们电脑上的防火墙。
然后查看我们电脑的IPv4地址。打开命令提示符输入ipconfig,找一下连的无线就找WANL那个，网线就找适配器那个。
最后在我们的手机上打开浏览器，地址栏输入IP地址加上我们server.js中监听的端口号加/HTML文件
eg:192.168.137.43:9890/index.html
因为express默认打开我们使用路径下的index.html。
我们这里只输入ip+端口号也可以
效果如下图：

以上演示电脑为window系统，用mac的有部分地方不同，思路如出一辙。