我的网站 - 聊天、推荐、启动、主页

<div class='header'>
        <h1>My Website</h1>
        <p>./getzuy.json</p>
        <p>时间：<span id='time'></span></p>
        <p>天气：晴</p>
    </div>
    <div class='container'>
        <h2>欢迎来到我的网站！</h2>
        <p>这里是一个简单的介绍。</p>
        <p><a href='#'>发帖人</a></p>
        <p><a href='#'>发帖简介</a></p>
        <p><a href='#'>原帖链接</a></p>
    </div>
    <div class='footer'>
        <a href='#' class='active'>主页</a>
        <a href='#'>推荐</a>
        <a href='#'>启动</a>
        <a href='#'>聊天</a>
        <a href='#'>我的</a>
    </div>
    <div class='avatar'>头像</div>
    <div class='chat'></div>
    <script>
        // 获取系统时间并显示
        function getTime() {
            var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            document.getElementById('time').innerHTML = hours + ':' + minutes + ':' + seconds;
        }
        setInterval(getTime, 1000);
<pre><code>    // 获取JSON数据并解析
    function getChatData() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', './getzuy.json', true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                var chatElem = document.querySelector('.chat');
                var html = '';
                for (var i = 0; i &lt; data.Friends.length; i++) {
                    var friend = data.Friends[i];
                    var avatar = '&lt;img src=' + friend.url + ' alt=' + friend.name + '&gt;';
                    var name = '&lt;p&gt;' + friend.name + '&lt;/p&gt;';
                    var sex = '&lt;p&gt;' + friend.sex + '&lt;/p&gt;';
                    var email = '&lt;p&gt;' + friend.email + '&lt;/p&gt;';
                    var lastLogin = '&lt;p&gt;上次登录时间：' + friend.lastlogin + '&lt;/p&gt;';
                    html += '&lt;div class='chat-item'&gt;' + avatar + name + sex + email + lastLogin + '&lt;/div&gt;';
                }
                chatElem.innerHTML = html;
            }
        };
        xhr.send();
    }
    // 初始加载
    getChatData();
    // 监听聊天按钮点击事件
    document.querySelectorAll('.footer a')[3].addEventListener('click', getChatData);
&lt;/script&gt;
</code></pre>