自定义倒计时

最新推荐文章于 2024-08-04 16:33:59 发布

与妖为邻

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量112

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/lulei5153/article/details/140783766

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>自定义倒计时</title>
    <style>
        #countdownElement {
            font-size: 20px;
        }

        #dialogCountdownElement {
            position: fixed;
            transform: translate(-150%, -20%);

            z-index: 999;

        }

        #dialogCountdownElement::backdrop {
            background-color: #8008;
            backdrop-filter: blur(2px);
        }
    </style>
</head>

<body>

    <!-- 倒计时 -->
    <button onclick="dialogCountdownElement.showModal()" id="countdownElement">倒计时</button>
    <dialog id="dialogCountdownElement">
        <form method="dialog">
            <div>
                <label for="message">更改提示信息：</label>
                <input type="text" id="message" value="距离2024年国庆节还有：">
            </div>
            <div>
                <label for="targetDate">更改目标日期：</label>
                <input type="date" id="targetDate">

            </div>
            <p>2025主要节日时间表</p>
            <ul>
                <li>元旦：2025年1月1日</li>
                <li>春节：2025年2月12日</li>
                <li>清明节：2025年4月4日</li>
                <li>劳动节：2025年5月1日</li>
                <li>端午节：2025年6月2日</li>
                <li>中秋节：2025年9月21日</li>
                <li>国庆节：2025年10月1日</li>
            </ul>
            <button type="submit" style="display: block; margin: 5px auto;">关闭</button>
        </form>
    </dialog>
    <script>
        /* 倒计时功能实现*/
        // 加载时从localStorage读取数据
        window.onload = function () {
            var message = localStorage.getItem('message');
            var targetDate = localStorage.getItem('targetDate');

            if (message) {
                document.getElementById('message').value = message;
            }
            if (targetDate) {
                document.getElementById('targetDate').value = targetDate;
            }
        };

        // 保存数据到localStorage
        function saveData() {
            var message = document.getElementById('message').value;
            var targetDate = document.getElementById('targetDate').value;

            localStorage.setItem('message', message);
            localStorage.setItem('targetDate', targetDate);
        }

        // 监听输入框的变化并保存数据
        document.getElementById('message').addEventListener('input', saveData);
        document.getElementById('targetDate').addEventListener('input', saveData);

        function showCountdown() {
            var message = document.getElementById('message').value;
            var targetDateInput = document.getElementById('targetDate');
            var targetDateValue = targetDateInput.value;
            // 这里继续您的倒计时逻辑
        }
        function showCountdown() {
            var message = document.getElementById('message').value;
            var targetDateInput = document.getElementById('targetDate');
            var targetDateValue = targetDateInput.value;
            var now = new Date();
            var targetDate;

            if (targetDateValue) {
                targetDate = new Date(targetDateValue);
            } else {
                targetDate = new Date(2024, 9, 1); // 默认值：2024年10月1日
            }

            var diff = targetDate - now;

            var days = Math.floor(diff / (1000 * 60 * 60 * 24));
            var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((diff % (1000 * 60)) / 1000);

            var countdownElement = document.getElementById('countdownElement');
            countdownElement.innerHTML = `${message}${days}天${hours}小时${minutes}分${seconds}秒`;
        }

        showCountdown();
        setInterval(showCountdown, 1000);
        /* 倒计时功能实现 结束*/
    </script>
</body>

</html>