115 lines
3.1 KiB
HTML
115 lines
3.1 KiB
HTML
|
<!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>
|