first commit

2021-10-30 23:20:58 +08:00 · 2021-10-30 23:20:58 +08:00 · 71af632d64
commit 71af632d64
20 changed files with 1964 additions and 0 deletions
--- a/demo.html
+++ b/demo.html
@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <style type="text/css">
+      body {
+        background-image: url("images/homepage.png");
+        overflow: hidden;
+        height: 100%;
+      }
+      #clock {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+        font-family: "Noto Sans CJK SC";
+        font-weight: 700;
+        font-size: 100pt;
+      }
+      #calendar {
+        position: absolute;
+        top: 220px;
+        left: 42px;
+        font-family: "Noto Sans CJK SC";
+        font-weight: 700;
+        font-size: 38pt;
+      }
+      #weather {
+        position: absolute;
+        top: 100px;
+        left: 630px;
+        font-family: "Noto Sans CJK SC";
+        font-weight: 700;
+        font-size: 32pt;
+      }
+      #temperature {
+        position: absolute;
+        top: 150px;
+        left: 630px;
+        font-family: "Noto Sans CJK SC";
+        font-weight: 700;
+        font-size: 70pt;
+      }
+      #settings {
+        position: absolute;
+        top: 300px;
+        left: 0px;
+        width: 512px;
+        height: 300px;
+      }
+      #view {
+        position: absolute;
+        top: 300px;
+        left: 512px;
+        width: 512px;
+        height: 300px;
+      }
+    </style>
+
+    <title>PiApp</title>
+  </head>
+  <body>
+    <div id="clock">正在加载</div>
+    <div id="calendar">正在加载</div>
+    <div id="weather">正在加载</div>
+    <div id="temperature">正在加载</div>
+    <a href="select.html" id="settings"></a>
+    <a href="view.html" id="view"></a>
+    <script src="node_modules/moment/min/moment-with-locales.min.js"></script>
+    <script>
+      moment.locale("zh-cn");
+      displayTime();
+      function displayTime() {
+        document.getElementById("clock").textContent = moment().format("LTS");
+      }
+      document.getElementById("calendar").textContent = moment().format(
+        "LL dddd"
+      );
+      String.prototype.removeBlankLines = function () {
+        return this.replace(/(\n[\s\t]*\r*\n)/g, "\n").replace(
+          /^[\n\r\n\t]*|[\n\r\n\t]*$/g,
+          ""
+        );
+      };
+      setInterval(displayTime, 1000);
+      var Http = new XMLHttpRequest();
+      var url =
+        "https://devapi.qweather.com/v7/weather/3d?location=101220109&key=cb36659932e04262904836976ac4e47a";
+      Http.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+          var weatherJson = Http.responseText;
+          var weatherObj = JSON.parse(weatherJson);
+          document.getElementById("weather").textContent =
+            weatherObj.daily[0].textDay +
+            " " +
+            weatherObj.daily[0].windDirDay +
+            weatherObj.daily[0].windScaleDay +
+            "级";
+          document.getElementById("temperature").textContent =
+            weatherObj.daily[0].tempMin +
+            "-" +
+            weatherObj.daily[0].tempMax +
+            "℃";
+        }
+      };
+      Http.open("GET", url);
+      Http.send();
+    </script>
+  </body>
+</html>