注：此代码来源与微信公众号：前端Hardy，传送门：点击传送
如有侵权请联系删除！！！
在某一天的上午，闲的无聊看看看公众号看看大佬们在公众号上面都更新了什么文章以及小案例。于是我逛着逛着发现了“前端Hardy”发布的一个小案例感觉非常好看
于是我将这位大佬的代码自己运行看一下但是只是静态的不会更新天气以及时间和地区的天气也看了评论区，说怎么调取天气数据和如何调取天气数据。
其实这些都很简单，使用JavaScript来进行获取天气以及使用外部的api来进行天气的获取以及更新天气和更新时间
首先先把基本的结构完成
<div class="card">
<section class="info-section">
<div class="background-design">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="left-side">
<div class="weather">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
</div>
<div id="weather-text">获取中...</div>
</div>
<div class="temperature" id="current-temp">获取中...</div>
<div class="range" id="temp-range">获取中...</div>
</div>
<div class="right-side">
<div>
<div class="hour" id="current-time">--:--</div>
<div class="date" id="current-date">- --/--</div>
</div>
<div class="city" id="current-city">重庆市</div>
</div>
</section>
<section class="days-section">
<button>
<span class="day" id="next-day">-</span>
<span class="icon-weather-day">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"/><line x1="12" y1="2" x2="12" y2="9"/><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"/><line x1="1" y1="18" x2="3" y2="18"/><line x1="21" y1="18" x2="23" y2="18"/><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"/><line x1="23" y1="22" x2="1" y2="22"/><polyline points="8 6 12 2 16 6"/></svg>
</span>
<span class="city">重庆市</span>
</button>
</section>
</div>效果图
现在只是把基本的结构完成还没调用天气的api所以还获取不到天气以及时间
获取天气的来源的api我是使用的风天气API，如何创建风天气API在网上有相关的教程请各位自行百度，这里就不在过多赘述。
首先获取天气数据使用风天气API以及对应的城市id，城市id可自行查询
// 获取天气数据的函数
async function getWeatherData() {
try {
// 使用和风天气API
const key = '你自己的api'; // 和风天气API密钥
const location = '101040100'; // 重庆市的城市ID
const response = await fetch(`https://devapi.qweather.com/v7/weather/now?key=${key}&location=${location}`);
const data = await response.json();
if (data.code === '200') {
const weatherInfo = data.now;
// 更新天气信息
document.getElementById('weather-text').textContent = weatherInfo.text;
document.getElementById('current-temp').textContent = `${weatherInfo.temp}°`;
document.getElementById('temp-range').textContent = `${parseInt(weatherInfo.temp)-2}°/${parseInt(weatherInfo.temp)+2}°`;
document.getElementById('current-city').textContent = '重庆市';
// 更新时间
updateTime();
}
} catch (error) {
console.error('获取天气信息失败:', error);
// 显示错误信息
document.getElementById('weather-text').textContent = '获取失败';
document.getElementById('current-temp').textContent = '--°';
document.getElementById('temp-range').textContent = '--°/--°';
}
}
// 页面加载时立即执行
document.addEventListener('DOMContentLoaded', function() {
updateTime();
getWeatherData();
// 设置定时更新
setInterval(updateTime, 1000);
setInterval(getWeatherData, 30 * 60 * 1000);
});
完成以后的效果
虽然在细节上还是稍微缺乏很多但是还是能够完成天气的获取以及时间的获取就行，在后期会不断的完善该效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
height: 180px;
width: 280px;
border-radius: 25px;
background: lightgrey;
overflow: hidden;
transition: 100ms ease;
box-shadow: rgba(0, 0, 0, 0.15) 2px 3px 4px;
}
.info-section {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 75%;
color: white;
}
.left-side {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
z-index: 1;
padding-left: 18px;
}
button {
display: block;
border: none;
background: transparent;
}
.weather {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
}
.weather div {
display: flex;
align-items: center;
}
.weather div:nth-child(1) {
width: 40%;
height: auto;
}
.temperature {
font-size: 34pt;
font-weight: 500;
line-height: 8%;
}
.right-side {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
height: 100%;
padding-right: 18px;
z-index: 1;
}
.right-side>div {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.hour {
font-size: 19pt;
line-height: 1em;
padding-bottom: 4px;
}
.date {
font-size: 15px;
}
.background-design {
position: absolute;
height: 100%;
width: 100%;
background-color: #ec7263;
overflow: hidden;
}
.circle {
background-color: #efc745;
}
.circle:nth-child(1) {
position: absolute;
top: -80%;
right: -50%;
width: 300px;
height: 300px;
opacity: 0.4;
border-radius: 50%;
}
.circle:nth-child(2) {
position: absolute;
top: -70%;
right: -30%;
width: 210px;
height: 210px;
opacity: 0.4;
border-radius: 50%;
}
.circle:nth-child(3) {
position: absolute;
top: -35%;
right: -8%;
width: 100px;
height: 100px;
opacity: 1;
border-radius: 50%;
}
.days-section {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 25%;
background-color: #974859;
gap: 2px;
box-shadow: inset 0px 2px 5px #974859;
}
.days-section button {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: #a75265;
box-shadow: inset 0px 2px 5px #974859;
cursor: pointer;
transition: 100ms ease;
gap: 5px;
}
.days-section button:hover {
scale: 0.9;
border-radius: 10px;
}
.days-section .day {
font-size: 10pt;
font-weight: 500;
color: white;
opacity: 0.7;
}
.icon-weather-day {
display: flex;
align-items: center;
width: 20px;
height: 100%;
}
.city {
font-size: 14px;
}
</style>
</head>
<body>
<div class="card">
<section class="info-section">
<div class="background-design">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="left-side">
<div class="weather">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
</div>
<div id="weather-text">获取中...</div>
</div>
<div class="temperature" id="current-temp">获取中...</div>
<div class="range" id="temp-range">获取中...</div>
</div>
<div class="right-side">
<div>
<div class="hour" id="current-time">--:--</div>
<div class="date" id="current-date">- --/--</div>
</div>
<div class="city" id="current-city">重庆市</div>
</div>
</section>
<section class="days-section">
<button>
<span class="day" id="next-day">-</span>
<span class="icon-weather-day">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"/><line x1="12" y1="2" x2="12" y2="9"/><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"/><line x1="1" y1="18" x2="3" y2="18"/><line x1="21" y1="18" x2="23" y2="18"/><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"/><line x1="23" y1="22" x2="1" y2="22"/><polyline points="8 6 12 2 16 6"/></svg>
</span>
<span class="city">重庆市</span>
</button>
</section>
</div>
<script>
// 获取天气数据的函数
async function getWeatherData() {
try {
// 使用和风天气API
const key = '你自己的api'; // 和风天气API密钥
const location = '101040100'; // 重庆市的城市ID
const response = await fetch(`https://devapi.qweather.com/v7/weather/now?key=${key}&location=${location}`);
const data = await response.json();
if (data.code === '200') {
const weatherInfo = data.now;
// 更新天气信息
document.getElementById('weather-text').textContent = weatherInfo.text;
document.getElementById('current-temp').textContent = `${weatherInfo.temp}°`;
document.getElementById('temp-range').textContent = `${parseInt(weatherInfo.temp)-2}°/${parseInt(weatherInfo.temp)+2}°`;
document.getElementById('current-city').textContent = '重庆市';
// 更新时间
updateTime();
}
} catch (error) {
console.error('获取天气信息失败:', error);
// 显示错误信息
document.getElementById('weather-text').textContent = '获取失败';
document.getElementById('current-temp').textContent = '--°';
document.getElementById('temp-range').textContent = '--°/--°';
}
}
// 更新时间的函数
function updateTime() {
const now = new Date();
const hour = now.getHours().toString().padStart(2, '0');
const minute = now.getMinutes().toString().padStart(2, '0');
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
const weekDay = weekDays[now.getDay()];
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const date = now.getDate().toString().padStart(2, '0');
// 使用getElementById来更新元素
document.getElementById('current-time').textContent = `${hour}:${minute}`;
document.getElementById('current-date').textContent = `${weekDay} ${month}-${date}`;
document.getElementById('next-day').textContent = weekDays[(now.getDay() + 1) % 7];
}
// 页面加载时立即执行
document.addEventListener('DOMContentLoaded', function() {
updateTime();
getWeatherData();
// 设置定时更新
setInterval(updateTime, 1000);
setInterval(getWeatherData, 30 * 60 * 1000);
});
</script>
</body>
</html>
Comments NOTHING