个性化网页模板：倒计时、时间、天气和励志语录

很高兴为您提供这个个人网页的建议。以下是一个简单的网页设计，包括倒计时、时间、天气和学习励志语录：
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>个人网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
        }
        h1 {
            font-weight: normal;
            font-size: 36px;
            text-align: center;
            margin-top: 50px;
        }
        #countdown {
            font-size: 48px;
            text-align: center;
            margin-top: 50px;
        }
        #time {
            font-size: 24px;
            text-align: center;
            margin-top: 20px;
        }
        #weather {
            font-size: 24px;
            text-align: center;
            margin-top: 20px;
        }
        #quote {
            font-size: 24px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>个人网页</h1>
    <div id='countdown'></div>
    <div id='time'></div>
    <div id='weather'></div>
    <div id='quote'></div>
    <script>
        // 倒计时
        var countdownDate = new Date('2022-01-01').getTime();
        var countdown = setInterval(function() {
            var now = new Date().getTime();
            var distance = countdownDate - 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').innerHTML = days + '天 ' + hours + '小时 ' +
            minutes + '分钟 ' + seconds + '秒 ';
            if (distance < 0) {
                clearInterval(countdown);
                document.getElementById('countdown').innerHTML = '倒计时已结束';
            }
        }, 1000);
        // 时间
        setInterval(function() {
            var now = new Date();
            var time = now.toLocaleTimeString();
            document.getElementById('time').innerHTML = '现在时间：' + time;
        }, 1000);
        // 天气
        var weatherAPI = 'http://api.openweathermap.org/data/2.5/weather?q=shenzhen&appid=your_appid&units=metric';
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                var weather = response.weather[0].description;
                var temp = response.main.temp;
                document.getElementById('weather').innerHTML = '深圳天气：' + weather + '，温度：' + temp + '℃';
            }
        };
        xhr.open('GET', weatherAPI, true);
        xhr.send();
        // 学习励志语录
        var quotes = [
            '成功者不断尝试，失败者不停抱怨。',
            '勤奋是成功的妈妈，懒惰是失败的父亲。',
            '生活不是等待风暴过去，而是学会在风雨中跳舞。',
            '成功的秘诀在于坚持，不是一时的爆发。',
            '你要相信自己可以改变未来，因为你已经改变了过去。',
            '每天都是一个新的开始。',
            '做你自己，其他角色已经有人扮演了。',
            '只要你肯努力，没有做不到的事情。',
            '只有在经历风雨之后，才能见到彩虹。',
            '成功是一种习惯，而不是一种结果。',
        ];
        var quoteIndex = Math.floor(Math.random() * quotes.length);
        document.getElementById('quote').innerHTML = quotes[quoteIndex];
    </script>
</body>
</html>
注意：在 weatherAPI 中，您需要用自己的 OpenWeatherMap API 密钥替换 your_appid。
效果如下图所示：
个人网页