<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/qweather-icons.css">
<title>Document</title>
</head>
<body>
<div class="video-background">
<video autoplay loop muted>
<source src="./video/a0.mp4" type="video/mp4">
</video>
</div>
<div class="head">
<div class="nav clearfix">
<div class="nav-left">
全国城市天气预报
</div>
<div class="nav-moid">
<ul id="myList">
<li>首页</li>
<li><a href="./index.html">今日天气</a></li>
<li><a href="./map.html">城市数据</a></li>
<li><a href="./coldy.html">气象热点</a></li>
<li>联系我们</li>
</ul>
</div>
<div class="nav-right">
<img src="./images/Coldy/weizhi.png" alt="" srcset="">
<span id="span1">青岛</span>
<input type="text" id="myInput">
<button onclick="updateSpan()">切换</button>
</div>
</div>
</div>
<!-- 展开 -->
<div class="shows">
<div class="show">
<ul class="tabs">
<li data-tab="tab-1" class="tab-link">今日天气</li>
<li data-tab="tab-2" class="tab-link">未来三天</li>
<li data-tab="tab-3" class="tab-link">空气质量</li>
<li data-tab="tab-4" class="tab-link">温馨提示</li>
</ul>
</div>
<div class="shopen">
<span>展</span>
<span>开</span>
</div>
</div>
<div class="tab-content">
<!-- 今日天气 -->
<div class="tab-panel" id="tab-1">
<div class="content">
<div class="b-lef">
<div class="city">
<p class="t-city"><span id="span2">青岛</span> 今日天气</p>
</div>
<div class="cldy">
<p class="el-time"></p>
<div class="csd">
<span class="temp"></span>
<img class="cl-img" src="./images/icon/101.png" alt="">
</div>
<div class="shes">
<span class="temin"></span>
~<span class="temax"></span>
</div>
<ul>
<li>天气：<span class="coldy"></span></li>
<li>空气质量：<span class="cate"></span></li>
<li>风向：<span class="wind"></span></li>
<li>风力：<span class="winsc"></span>级</li>
</ul>
<p class="el-tit">温馨提示</p>
<p class="expict"></p>
</div>
</div>
<div class="b-rig">
<ul>
<li class="name"></li>
<li class="cade"></li>
</ul>
<ul>
<li class="name"></li>
<li class="cade"></li>
</ul>
<ul>
<li class="name"></li>
<li class="cade"></li>
</ul>
<ul>
<li class="name"></li>
<li class="cade"></li>
</ul>
<ul>
<li class="name"></li>
<li class="cade"></li>
</ul>
<ul>
<li class="name"></li>
<li class="cade"></li>
</ul>
</div>
</div>
</div>
<!-- 未来三天 -->
<div class="tab-panel" id="tab-2">
<div class="fun">
<div class="today">
<span>今天</span>
<span class="new-t"></span>
<img class="coimg">
<span class="shesd"></span>
<span class="winds"></span>
<span class="tems"></span>
</div>
<div class="today">
<span>明天</span>
<span class="new-t"></span>
<img class="coimg">
<span class="shesd"></span>
<span class="winds"></span>
<span class="tems"></span>
</div>
<div class="today">
<span>后天</span>
<span class="new-t"></span>
<img class="coimg">
<span class="shesd"></span>
<span class="winds"></span>
<span class="tems"></span>
</div>
</div>
</div>
<div class="tab-panel" id="tab-3">
<div class="fun">
空气质量空气质量空气质量
</div>
</div>
<div class="tab-panel" id="tab-4">
<div class="fun"> 温馨提示温馨提示</div>
</div>
<div class="footer">
<div class="foot">
<span>备案号:鲁ICP备20000563号</span>
<span>数据来源:和风天气</span>
</div>
</div>
<script src="./js/code.jquery.com_jquery-3.7.1.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/index.js"></script>
<script>
</script>
</body>
</html>* {
margin: 0;
padding: 0;
}
.head {
width: 100%;
height: 60px;
color: white;
background-color: rgba(0, 0, 0, 0.3)
}
.nav {
width: 80%;
margin: 0 auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
}
.nav-left {
float: left;
width: 25%;
height: 60px;
line-height: 60px;
text-align: center;
}
.nav-moid {
width: 65%;
}
.nav-moid li {
list-style: none;
font-size: 14px;
float: left;
position: relative;
height: 60px;
line-height: 60px;
text-align: center;
padding: 0 20px;
}
.nav ul li:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.nav ul li a {
color: white;
text-decoration: none;
}
/* .nav-moid ul li:nth-child(2){
background-color: rgba(0, 0, 0, 0.5);
} */
.nav-right {
float: right;
position: relative;
padding-top: 12px;
font-size: 14px;
}
.nav-right img{
position: absolute;
top: 16px;
left: -26px;
display: inline-block;
width: 24px;
height: 24px;
}
.nav-right input {
height: 28px;
}
.nav-right button {
height: 32px;
width: 46px;
border: none;
background-color: #4c4c4c;
color: white;
}
/* 展开 */
.shows {
position: fixed;
top: 30%;
left: -100px;
display: flex;
height: 280px;
width: 128px;
}
.shopen {
position: relative;
top: 36%;
left: 0;
height: 80px;
width: 28px;
color: white;
background-color: rgb(22, 131, 177);
}
.shopen span {
display: block;
padding: 10px 6px;
}
.show {
height: 280px;
width: 100px;
background-color: rgba(140, 140, 140, 0.3);
/* display: none; */
}
.show ul li {
list-style-type: none;
height: 70px;
width: 100%;
line-height: 70px;
text-align: center;
color: white;
}
.show ul li:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.3);
}
/* 今日天气 */
.content {
margin: 100px auto;
width: 60%;
display: flex;
}
.b-lef {
width: 300px;
height: 400px;
color: white;
border: 1px solid skyblue;
border-radius: 12px;
/* background: red; */
}
.b-lef:hover {
transform: scale(1.2);
}
.b-lef .city {
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: skyblue;
}
.b-lef .cldy {
height: 360px;
background-color: rgba(130, 130, 130, 0.3);
}
/* 时间戳 */
.b-lef .el-time {
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
}
.b-lef .csd {
width: 100%;
height: 100px;
line-height: 150px;
text-align: center;
}
.temp{
font-size: 32px;
}
.csd img {
width: 80px;
height: 80px;
}
.b-lef .shes {
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 0;
text-align: center;
}
.temin {
font-size: 28px;
/* 举例，设置较大的字体大小 */
}
.temax {
font-size: 12px;
/* 举例，设置较小的字体大小 */
}
.b-lef ul {
height: 80px;
width: 100%;
}
.b-lef .cldy ul li {
width: 50%;
height: 40px;
float: left;
font-size: 14px;
list-style: none;
line-height: 40px;
text-align: center;
}
.b-lef .cldy ul li:hover {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.b-lef .el-tit {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
text-align: center;
}
.b-lef .expict {
width: 100%;
height: 60px;
font-size: 14px;
line-height: 25px;
text-indent: 2em;
}
.b-lef .expict:hover {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.b-rig {
width: 420px;
height: 400px;
padding: 80px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.b-rig ul:hover {
transform: scale(1.2);
}
.b-rig ul {
width: 112px;
height: 80px;
list-style: none;
}
.b-rig ul li {
width: 112px;
height: 40px;
color: white;
line-height: 40px;
text-align: center;
}
.b-rig ul li:nth-child(1) {
background-color: rgba(0, 0, 0, 0.4);
}
.b-rig ul li:nth-child(2) {
background-color: rgba(128, 128, 128, 0.3);
}
/* tab切换 */
.tab-panel {
display: none;
}
.tab-panel:first-child {
display: block;
}
.tab-link.active {
/* 这里添加选中Tab的样式，如背景色、边框等 */
background-color: rgba(128, 128, 128, 0.3);
}
/* 未来三天 */
.fun {
margin: 150px auto;
width: 60%;
height: 260px;
/* background-color: blue; */
display: flex;
color: white;
font-size: 16px;
justify-content: space-around;
}
.fun .today {
width: 30%;
height: 100%;
padding: 20px 0;
background-color: rgba(255, 255, 255, 0.4);
}
.fun span {
display: inline-block;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
.fun ul li {
list-style-type: none;
}
.fun img {
margin: 0 87px;
width: 100px;
height: 100px;
}
/* 尾部 */
.footer {
width: 100%;
height: 40px;
color: white;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
bottom: 0;
}
.foot {
margin: 0 auto;
width: 25%;
height: 40px;
line-height: 40px;
text-align: center;
}
.footer span {
font-size: 14px;
color: #9a9a9a;
padding: 0 8px;
}
/*背景视频*/
.video-background {
position: fixed; /* 使视频背景固定在视口上 */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100; /* 确保视频背景在内容下方 */
overflow: hidden; /* 隐藏超出容器的部分 */
}
.video-background video {
/* 确保视频覆盖整个容器 */
width: 100%;
height: 100%;
object-fit: cover; /* 保持视频的宽高比，同时填充整个容器 */
}// 导航
let xhg = new XMLHttpRequest();
xhg.open('GET', 'https://geoapi.qweather.com/v2/city/lookup?key=5d967db598cd49efbd15bbca6314559b&location=101120201');
xhg.send();
xhg.onreadystatechange = function () {
if (xhg.readyState == 4) {
let a = JSON.parse(xhg.responseText);
console.log(a);
console.log(a.location[0].id);
$("t-city").html(a.location[0].name);
// 获取城市天气
let xhrx = new XMLHttpRequest();
xhrx.open('GET', 'https://devapi.qweather.com/v7/weather/now?key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhrx.send();
xhrx.onreadystatechange = function () {
if (xhrx.readyState == 4) {
let b = JSON.parse(xhrx.responseText);
console.log(b);
$(".temp").html(b.now.temp + "℃");
$(".coldy").html(b.now.text);
$(".wind").html(b.now.windDir);
$(".winsc").html(b.now.windScale);
$('.cl-img').attr('src', './images/icon/'+b.now.icon+'.png') ;
// 空气质量
let xhrq = new XMLHttpRequest();
xhrq.open('GET', 'https://devapi.qweather.com/v7/air/now?key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhrq.send();
xhrq.onreadystatechange = function () {
if (xhrq.readyState == 4) {
let c = JSON.parse(xhrq.responseText);
console.log(c);
$(".cate").html(c.now.category);
}
}
//天气指数
let xhrw = new XMLHttpRequest();
xhrw.open('GET', 'https://devapi.qweather.com/v7/indices/1d?type=1,2,3,4,16,6&key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhrw.send();
xhrw.onreadystatechange = function () {
if (xhrw.readyState == 4) {
let d = JSON.parse(xhrw.responseText);
console.log(d);
for (let i = 0; i < d.daily.length; i++) {
document.querySelectorAll(".b-rig .name")[i].innerText = d.daily[i].name;
// $(".b-rig .name").html(d.daily[i].name);
$(".b-rig .cade").html(d.daily[i].category);
}
$(".expict").html(d.daily[2].text);
}
}
let xhz = new XMLHttpRequest();
xhz.open('GET', 'https://devapi.qweather.com/v7/weather/3d?key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhz.send();
xhz.onreadystatechange = function () {
if (xhz.readyState == 4) {
let e = JSON.parse(xhz.responseText);
console.log(e);
let shesElements = document.querySelectorAll(".shes");
let tempMinElement = shesElements[0].querySelector(".temin");
let tempMaxElement = shesElements[0].querySelector(".temax");
// 设置文本内容
tempMinElement.innerText = e.daily[0].tempMin;
tempMaxElement.innerText = e.daily[0].tempMax + "℃";
for (let s = 0; s < e.daily.length; s++) {
document.querySelectorAll(".new-t")[s].innerText = e.daily[s].textDay;
document.querySelectorAll(".coimg")[s].setAttribute("src", `./images/icon/${e.daily[s].iconDay}.png`);
document.querySelectorAll(".shesd")[s].innerText = `${e.daily[s].tempMin}℃~${e.daily[s].tempMax}℃`;
document.querySelectorAll(".winds")[s].innerText = `${e.daily[s].windDirDay} ${e.daily[s].windScaleNight}级`;
document.querySelectorAll(".tems")[s].innerText = `湿度：${e.daily[s].humidity}`;
}
}
}
}
}
}
}
let inp = document.querySelector("input")
let btn = document.querySelector("button")
btn.onclick = function () {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://geoapi.qweather.com/v2/city/lookup?key=5d967db598cd49efbd15bbca6314559b&location=' + inp.value);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
let a = JSON.parse(xhr.responseText);
console.log(a);
console.log(a.location[0].id);
$("t-city").html(a.location[0].name);
// $("t-city").innerText(a.location[0].adm2);
// 获取城市天气
let xhrx = new XMLHttpRequest();
xhrx.open('GET', 'https://devapi.qweather.com/v7/weather/now?key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhrx.send();
xhrx.onreadystatechange = function () {
if (xhrx.readyState == 4) {
let b = JSON.parse(xhrx.responseText);
console.log(b);
$(".temp").html(b.now.temp + "℃");
$(".coldy").html(b.now.text);
$(".wind").html(b.now.windDir);
$(".winsc").html(b.now.windScale);
$('.coimg').attr('src', './images/icon/'+b.now.icon+'.png') ;
// 空气质量
let xhrq = new XMLHttpRequest();
xhrq.open('GET', 'https://devapi.qweather.com/v7/air/now?key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhrq.send();
xhrq.onreadystatechange = function () {
if (xhrq.readyState == 4) {
let c = JSON.parse(xhrq.responseText);
console.log(c);
$(".cate").html(c.now.category);
}
}
//天气指数
let xhrw = new XMLHttpRequest();
xhrw.open('GET', 'https://devapi.qweather.com/v7/indices/1d?type=1,2,3,4,16,6&key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhrw.send();
xhrw.onreadystatechange = function () {
if (xhrw.readyState == 4) {
let d = JSON.parse(xhrw.responseText);
console.log(d);
for (let i = 0; i < d.daily.length; i++) {
document.querySelectorAll(".b-rig .name")[i].innerText = d.daily[i].name;
// $(".b-rig .name").html(d.daily[i].name);
$(".b-rig .cade").html(d.daily[i].category);
}
}
}
// 未来天气
let xhz = new XMLHttpRequest();
xhz.open('GET', 'https://devapi.qweather.com/v7/weather/3d?key=5d967db598cd49efbd15bbca6314559b&location=' + a.location[0].id);
xhz.send();
xhz.onreadystatechange = function () {
if (xhz.readyState == 4) {
let e = JSON.parse(xhz.responseText);
console.log(e);
for (let s = 0; s < e.daily.length; s++) {
document.querySelectorAll(".new-t")[s].innerText = e.daily[s].textDay;
document.querySelectorAll(".coimg")[s].setAttribute("src", `./images/icon/${e.daily[s].iconDay}.png`);
document.querySelectorAll(".shesd")[s].innerText = `${e.daily[s].tempMin}℃~${e.daily[s].tempMax}℃`;
document.querySelectorAll(".winds")[s].innerText = `${e.daily[s].windDirDay} ${e.daily[s].windScaleNight}级`;
document.querySelectorAll(".tems")[s].innerText = `湿度：${e.daily[s].humidity}`;
// $('.coimg').attr('src', './images/icon/'+b.now.icon+'.png')
// $(".new-t").html(f.daily[0].updateTime);
// $(".te-col").html(f.daily[0].textDay);
}
}
}
}
}
}
}
var inputValue = document.getElementById('myInput').value;
// 如果 input 有值，则更新 span 的内容
if (inputValue !== '') {
// 获取 span 元素并设置其文本内容为 input 的值
var spanIds = ['span1', 'span2', 'span3'];
spanIds.forEach(function (id) {
var spanElement = document.getElementById(id);
spanElement.textContent = inputValue;
});
}
}
// //span更新
// btn.onclick = function updateSpan() {
// // 获取 input 元素的值
// var inputValue = document.getElementById('myInput').value;
// // 如果 input 有值，则更新 span 的内容
// if (inputValue !== '') {
// // 获取 span 元素并设置其文本内容为 input 的值
// var spanIds = ['span1', 'span2', 'span3'];
// spanIds.forEach(function(id) {
// var spanElement = document.getElementById(id);
// spanElement.textContent = inputValue;
// });
// }
// // 注意：这里不设置默认值，因为 span 已经在 HTML 中被设置为 "青岛"
// }
// https://api.qweather.com/airquality/v1/now/{LocationID}?
// 时间戳
function showTime() {
let now = new Date();
let year = now.getFullYear(); // 返回年份
let month = now.getMonth() + 1;
let day = now.getDate();
let dayNames = ['日', '一', '二', '三', '四', '五', '六'];
let dayOfWeek = dayNames[now.getDay()]; // 获取星期几
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
// 拼接时间字符串，包括星期几
let timeString = year + "年" + month + "月" + day + "日" + "星期" + dayOfWeek + hours + ":" + minutes + ":" + seconds;
$(".el-time").text(timeString); // 使用jQuery的.text()方法来设置内容
// 每秒更新一次时间
setTimeout(showTime, 1000);
}
// 首次加载时显示时间
$(document).ready(function () {
showTime();
});
$(document).ready(function () { // 确保DOM已加载后再调用showTime函数
showTime();
});
// 展开
$(".shopen").mouseenter(function () {
let shows = $(".shows");
shows.css("left", '0')
});
$(".shows").mouseleave(function () {
let shows = $(".shows");
shows.css("left", '-' + 100 + 'px')
});
// tab切换
document.addEventListener('DOMContentLoaded', function () {
// 获取所有的Tab链接和内容面板
var tabLinks = document.querySelectorAll('.tab-link');
var tabPanels = document.querySelectorAll('.tab-panel');
// 为每个Tab链接添加点击事件监听器
tabLinks.forEach(function (tabLink) {
tabLink.addEventListener('click', function () {
// 移除所有Tab链接的active类
tabLinks.forEach(function (link) {
link.classList.remove('active');
});
// 隐藏所有内容面板
tabPanels.forEach(function (panel) {
panel.style.display = 'none';
});
// 获取当前点击的Tab链接的data-tab属性值
var tabId = this.getAttribute('data-tab');
// 为当前Tab链接添加active类，并显示对应的内容面板
this.classList.add('active');
document.getElementById(tabId).style.display = 'block';
});
});
});
let listItems = document.querySelectorAll('#myList li');
listItems[1].style.backgroundColor ='rgba(0, 0, 0, 0.3)';
页面效果
