评分

网站添加历史上的今天

2年前发布

200

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取历史的今天</title>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/jishuya-cn/geshihua/PC%E7%AB%AF%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81.css">
</head>

<body>
    <div class="history_">
        <div class="historyTitle_">
            <div>历史上的今天</div>
            <div class="historyTime_">时间 : 2023年13月2日</div>
        </div>
        <div>
            <ul class="historyData_">
            </ul>
        </div>
    </div>
    <div class="error">
        获取错误!
    </div>
    <!-- https://tenapi.cn/lishi/?format=%22json%22 -->
    <script>
        fetch('https://tenapi.cn/lishi/?format=json', {
            Headers: {
                'Content-Type': 'application/json'
            }
        }
        ).then(data => {
            return data.text();
        }).then(ret => {
            const res = JSON.parse(ret)
            if (+res.code !== 200) {
                document.querySelector('.error').style.display = 'block'
                return
            }
            history(res)
        });
        function history(data) {
            const time = data.day
            const list = data.content
            document.querySelector('.historyTime_').innerHTML = time
            const historyData = document.querySelector('.historyData_')
            const arr = []
            list.forEach((item, index) => {
                arr.push(`<li>${item}</li>`)
                historyData.innerHTML = arr.join('')
            })
            document.querySelector('.history_').style.display = 'block'
        }
    </script>
    <style>
        .error {
            display: none;
        }

        .history_ {
            display: none;
            width: 100%;
        }

        .historyTitle_ {
            height: 30px;
        }

        .historyTitle_ div:nth-child(1) {
            float: left;
        }

        .historyTitle_ div:nth-child(2) {
            float: right;
        }

        .historyData_ li {
            border-top: 1px solid #f3f3f3;
        }
    </style>
</body>

</html>

评分

欢迎为Ta评分

赞赏