个性化网页模板：带倒计时、时间、天气和励志语录
<!DOCTYPE html>
<html>
<head>
<title>我的个人网页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>我的个人网页</h1>
<div class="countdown">
<h2>距离放假还有<span id="days"></span>天</h2>
</div>
<div class="time">
<h2>现在是<span id="time"></span></h2>
</div>
<div class="weather">
<h2>今天的天气是<span id="weather"></span></h2>
</div>
<div class="quote">
<h2>今天的励志语录：</h2>
<p id="quote"></p>
</div>
</div>
<pre><code><script src="script.js"></script>
</code></pre>
</body>
</html>
<p>使用 CSS 对网页进行美化：</p>
<p>body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}</p>
<p>.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}</p>
<p>h1 {
text-align: center;
}</p>
<p>.countdown,
.time,
.weather,
.quote {
margin-top: 40px;
text-align: center;
}</p>
<p>h2 {
margin-bottom: 20px;
}</p>
<p>.quote p {
font-size: 24px;
font-style: italic;
color: #666;
}</p>
<p>使用 JavaScript 添加功能：</p>
<p>// 倒计时
let countdownDate = new Date('2022-02-01').getTime();</p>
<p>function updateCountdown() {
let now = new Date().getTime();
let distance = countdownDate - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
document.getElementById('days').innerText = days;
}</p>
<p>updateCountdown();
setInterval(updateCountdown, 1000 * 60);</p>
<p>// 时间
function updateTime() {
let now = new Date();
let timeString = now.toLocaleTimeString();
document.getElementById('time').innerText = timeString;
}</p>
<p>updateTime();
setInterval(updateTime, 1000);</p>
<p>// 天气
function updateWeather() {
// 这里可以使用 API 获取天气信息
let weather = '晴';
document.getElementById('weather').innerText = weather;
}</p>
<p>updateWeather();</p>
<p>// 学习励志语录
let quotes = [
'生活就像海洋，只有意志坚强的人才能到达彼岸。',
'人生没有彩排，每一天都是现场直播。',
'今天的努力是为了未来更好的自己。',
'只有不断努力，才能成为更好的自己。',
'成功不是偶然的，而是必然的。',
'只要努力，就没有做不成的事情。',
'每一次跌倒都是为了更好地站起来。',
'路漫漫其修远兮，吾将上下而求索。',
'只要心中有梦想，就不会迷失方向。',
'只有拼尽全力，才能无愧于自己。',
];</p>
<p>function updateQuote() {
let index = Math.floor(Math.random() * quotes.length);
let quote = quotes[index];
document.getElementById('quote').innerText = quote;
}</p>
<p>updateQuote();
setInterval(updateQuote, 10000);</p>
<p>注意：这只是一个简单的示例，实际的网页可能需要更多的功能和美化。同时，如果要使用 API 获取天气信息等，还需要更多的工作。</p>
原文地址: https://www.cveoy.top/t/topic/lRj1 著作权归作者所有。请勿转载和采集!