根据一个API写一个欢迎弹窗

在github上乱逛发现一个API挺有趣,根据爬取到的中国法定节假日生成每日的自动化场景

    <div id="welcomeModal" class="modal">
        <div class="modal-content">
            <h2 id="welcomeMessage"></h2>
            <button id="closeModal">关闭</button>
        </div>
    </div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // 动态创建<style>标签并插入CSS样式
    const style = document.createElement('style');
    style.innerHTML = `
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            max-width: 80%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .modal-content h2 {
            margin-top: 0;
        }

        .modal-content button {
            padding: 10px 20px;
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }

        .modal-content button:hover {
            background-color: #0056b3;
        }
    `;
    document.head.appendChild(style);

    // 显示弹窗
    function showModal() {
        document.getElementById('welcomeModal').style.display = 'flex';
    }

    // 隐藏弹窗
    function hideModal() {
        document.getElementById('welcomeModal').style.display = 'none';
    }

    // 请求API数据
    fetch('https://siwt.jw1.dev/api/v1')
        .then(response => response.json())
        .then(data => {
            // 获取当前时间
            const now = new Date();
            const currentTime = now.toLocaleTimeString('zh-CN', { hour12: false });

            // 生成欢迎信息
            const welcomeMessage = `现在时间 ${currentTime}，今天是 ${data.requestedDate.day}，${data.desc}`;

            // 更新弹窗内容
            document.getElementById('welcomeMessage').innerText = welcomeMessage;

            // 显示弹窗
            showModal();
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });

    // 关闭弹窗按钮事件
    document.getElementById('closeModal').addEventListener('click', hideModal);
});
</script>