LiteyukiBot-TriM/liteyuki/resources/liteyuki_weather/templates/js/weather_now.js
2024-04-27 02:20:44 +08:00

114 lines
4.1 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* @typedef {Object} Location
* @property {string} city - The city name.
* @property {string} country - The country name.
*
* @typedef {Object} Weather
* @property {number} temperature - The current temperature.
* @property {string} description - The weather description.
*
* @typedef {Object} Data
* @property {Location} location - The location data.
* @property {Weather} weather - The weather data.
*/
/** @type {Data} */
let data = JSON.parse(document.getElementById("data").innerText)
let localData = data["localization"] // 本地化数据
let weatherNow = data["weatherNow"]
let weatherDaily = data["weatherDaily"]
let weatherHourly = data["weatherHourly"]
let aqi = data["aqi"]
let locationData = data["location"]
// 处理aqi
let aqiValue = 0
aqi["aqi"].forEach(
(item) => {
if (item["defaultLocalAqi"]) {
document.getElementById("aqi-data").innerText = "AQI " + item["valueDisplay"] + " " + item["category"]
// 将(255,255,255)这种格式的颜色设置给css
document.getElementById("aqi-dot").style.backgroundColor = "rgb(" + item["color"] + ")"
}
}
)
templates = {
"time": weatherNow["now"]["obsTime"],
"city": locationData["name"],
"adm": locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"],
"temperature-now": weatherNow["now"]["temp"] + "°",
"temperature-range": weatherDaily["daily"][0]["tempMin"] + "°/" + weatherDaily["daily"][0]["tempMax"] + "°",
"description": weatherNow["now"]["text"]
}
// 遍历每一个id给其赋值
for (let id in templates) {
document.getElementById(id).innerText = templates[id]
}
let maxHourlyItem = 8
let percentWidth = 1 / (maxHourlyItem * 1.5) * 100
let hourlyStep = 2 // n小时一个数据
let hourlyCount = 0
weatherHourly['hourly'].forEach(
(item, index) => {
if (index % hourlyStep !== 0) {
return
}
if (hourlyCount >= maxHourlyItem) {
return
}
let hourlyItemDiv = document.importNode(document.getElementById("hourly-item-template").content, true)
hourlyItemDiv.className = "hourly-item"
hourlyItemDiv.querySelector('.hourly-icon').setAttribute("src", `./img/qw_icon/${item["icon"]}.png`)
hourlyItemDiv.querySelector('.hourly-time').innerText = get_time_hour(item["fxTime"])
hourlyItemDiv.querySelector('.hourly-temperature').innerText = " " + item["temp"] + "°"
// 设置最大宽度
hourlyItemDiv.querySelector('.hourly-item').style.maxWidth = percentWidth + "%"
hourlyItemDiv.querySelector('.hourly-icon').style.maxWidth = "100%"
document.getElementById("hours-info").appendChild(hourlyItemDiv)
hourlyCount++
}
)
let maxDailyItem = 7
// 第一和第二天用today和tomorrow后面用星期X英文小写
let daysStandard = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
let todayDay = new Date().getDay()
let days = [localData['today'], localData['tomorrow']]
for (let i = 0; i < 5; i++) {
days.push(localData[daysStandard[(todayDay + i) % 7]])
}
weatherDaily['daily'].forEach(
(item, index) => {
if (index >= maxDailyItem) {
return
}
let today = days[index]
if (index >= 2){
today += `(${item["fxDate"].split("-")[1]}.${item["fxDate"].split("-")[2]})`
}
let dailyItemDiv = document.importNode(document.getElementById("daily-item-template").content, true)
dailyItemDiv.querySelector('.icon-day').setAttribute("src", `./img/qw_icon/${item["iconDay"]}.png`)
dailyItemDiv.querySelector('.icon-night').setAttribute("src", `./img/qw_icon/${item["iconNight"]}.png`)
dailyItemDiv.querySelector('.daily-day').innerText = today
dailyItemDiv.querySelector('.daily-weather').innerText = item["textDay"]
dailyItemDiv.querySelector('.daily-temperature').innerText = item["tempMin"] + "°~" + item["tempMax"] + "°"
document.getElementById('days-info').appendChild(dailyItemDiv)
}
)
function get_time_hour(fxTime) {
// fxTime 2024-05-03T02:00+08:00'
return fxTime.split("T")[1].split("+")[0]
}