HTML特效代码：天气时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气时钟</title>
<style>
body {
background: #002b36;
color: #93a1a1;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
font-size: 3em;
margin-top: 10vh;
margin-bottom: 10vh;
}
#clock {
font-size: 10em;
margin-bottom: 1em;
}
#weather {
font-size: 2em;
}
.sunny {
color: #b58900;
}
.cloudy {
color: #586e75;
}
.rainy {
color: #073642;
}
.snowy {
color: #fdf6e3;
}
</style>
</head>
<body>
<h1>天气时钟</h1>
<div id="clock"></div>
<div id="weather"></div>
<script>
function updateTime() {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
var weather = getWeather();
document.getElementById("weather").innerHTML = weather;
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function getWeather() {
var weatherTypes = ["sunny", "cloudy", "rainy", "snowy"];
var randomIndex = Math.floor(Math.random() * weatherTypes.length);
var weatherType = weatherTypes[randomIndex];
var weatherText = "";
switch(weatherType) {
case "sunny":
weatherText = "<i class='fas fa-sun'></i> 晴天";
break;
case "cloudy":
weatherText = "<i class='fas fa-cloud'></i> 阴天";
break;
case "rainy":
weatherText = "<i class='fas fa-cloud-rain'></i> 下雨";
break;
case "snowy":
weatherText = "<i class='far fa-snowflake'></i> 下雪";
break;
}
var className = weatherType + " animated infinite pulse";
document.getElementById("weather").className = className;
return weatherText;
}
setInterval(updateTime, 1000);
</script>
<!-- FontAwesome Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</body>
</html>这个天气时钟页面将会实时更新当前时间和天气，并且天气图标和文字会随机变化。天气图标和动画效果使用了FontAwesome和Animate.css库。
页面背景颜色和文字颜色可以在CSS部分进行修改。
你可以将这个天气时钟页面嵌入到你的网站或者博客中，让你的访客看到实时的天气和时间。Enjoy！