做一个html页面有一天的倒计时和一年的倒计时以及天气和励志文案
<!DOCTYPE html>
<html>
<head>
<title>倒计时和天气页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
<pre><code> h1 {
text-align: center;
font-size: 36px;
margin-top: 50px;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.countdown {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
margin-right: 50px;
text-align: center;
width: 300px;
}
.countdown h2 {
font-size: 24px;
margin-bottom: 20px;
}
.countdown p {
font-size: 18px;
margin-bottom: 10px;
}
.weather {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
text-align: center;
width: 300px;
}
.weather h2 {
font-size: 24px;
margin-bottom: 20px;
}
.weather p {
font-size: 18px;
margin-bottom: 10px;
}
.motivation {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
text-align: center;
width: 600px;
}
.motivation h2 {
font-size: 24px;
margin-bottom: 20px;
}
.motivation p {
font-size: 18px;
margin-bottom: 10px;
}
</style>
</code></pre>
</head>
<body>
<h1>倒计时和天气页面</h1>
<div class="container">
<div class="countdown">
<h2>一天倒计时</h2>
<p id="countdown-day" class="countdown-timer"></p>
</div>
<div class="countdown">
<h2>一年倒计时</h2>
<p id="countdown-year" class="countdown-timer"></p>
</div>
<div class="weather">
<h2>今日天气</h2>
<p id="weather"></p>
</div>
</div>
<div class="motivation">
<h2>每日励志</h2>
<p id="motivation"></p>
</div>
<pre><code><script>
// 一天倒计时
var endDay = new Date();
endDay.setHours(23, 59, 59, 999);
var countdownDay = setInterval(function() {
var now = new Date().getTime();
var distance = endDay - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown-day").innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
if (distance < 0) {
clearInterval(countdownDay);
document.getElementById("countdown-day").innerHTML = "已过期";
}
}, 1000);
// 一年倒计时
var endYear = new Date();
endYear.setMonth(11);
endYear.setDate(31);
endYear.setHours(23, 59, 59, 999);
var countdownYear = setInterval(function() {
var now = new Date().getTime();
var distance = endYear - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown-year").innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
if (distance < 0) {
clearInterval(countdownYear);
document.getElementById("countdown-year").innerHTML = "已过期";
}
}, 1000);
// 天气
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.openweathermap.org/data/2.5/weather?q=beijing&appid=API_KEY&units=metric", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var response = JSON.parse(xhr.responseText);
var weather = response.weather[0].description;
var temperature = response.main.temp;
document.getElementById("weather").innerHTML = "天气：" + weather + "，温度：" + temperature + "℃";
}
}
xhr.send();
// 每日励志
var motivations = [
"成功的人只有一种，就是坚持到底的人。",
"把握现在，才有未来。",
"人生没有彩排，每天都是现场直播。",
"世上无难事，只怕有心人。",
"勇气是控制恐惧心理，而不是心里毫无恐惧。",
"不经历风雨，怎么见彩虹。",
"失败不是你输在了起点，而是你选择了放弃。",
"生活就像海洋，只有意志坚强的人才能到达彼岸。",
"相信自己，你可以做到。",
"每一次努力都是一次积累，你不会感觉到它的价值，但它是你成功路上的基础。",
"只有自己没有克服的困难，没有自己克服不了的困难。",
"不要为自己设置限制，只要你能想到，你就能做到。",
"自己选择的路，跪着也要走完。",
"不管你正在经历什么，都不要忘记微笑，因为微笑是最美的表情。",
"没有人能够左右你的心情和情绪，除非你同意。"
];
var randomIndex = Math.floor(Math.random() * motivations.length);
document.getElementById("motivation").innerHTML = motivations[randomIndex];
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/8rq 著作权归作者所有。请勿转载和采集!