極簡指南針-手機訪問電腦

電腦上寫一個指南針的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的有部分地方不一樣，思路一模一樣。