独特的倒计时容器uniqueCountdownContainer：添加了5个默认的倒计时

于 2024-08-28 18:18:50 发布
阅读量584 收藏
点赞数 18
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulei5153/article/details/141646979
版权 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>独特的倒计时容器uniqueCountdownContainer</title>
</head>
<style></style>
<style>
    body {
        background: #0b1b2c;
    }

    /* 独特的倒计时容器uniqueCountdownContainer 开始 */
    #uniqueCountdownContainer {
        top: 42px;
        right: 0;
        position: fixed;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        border-radius: 5px;

        /* 默认的倒计时DefaultCountdown  */
        #DefaultCountdown {
            div:first-child {
                border-radius: 5px 5px 0 0;
            }

            div:nth-child(5) {
                border-radius: 0 0 5px 5px;
                margin-bottom: 2px;
            }
        }

        /* 添加倒计时区域 */
        .uniqueCountdowns-Button {
            display: flex;
        }

        input[type="checkbox"] {
            display: none;
        }

        label {
            &:hover {
                background-color: #e63c3c;
                cursor: pointer;

                strong {
                    color: #ffffff;
                    text-shadow: 2px 2px 2px #000000;
                }

                span {
                    color: #000000;
                    text-shadow: 1px 1px 1px #fffefe;
                    font-size: 1.8rem;
                }
            }
        }

        strong {
            text-shadow: 2px 2px 2px #ffffff;
        }

        span {
            color: #fff;
            text-shadow: 1px 1px 1px #000;
            font-size: 1.8rem;
        }
    }

    /* 添加按钮样式 */
    .uniqueAddButton {
        /* 确保按钮内容可以应用 writing-mode */
        /* display: inline-block; */
        /* 竖排文字，从左到右 */
        writing-mode: vertical-lr;
        /* 文字直立 */
        text-orientation: upright;
        letter-spacing: 15px;
        font-size: 18px;
    }

    /* 添加的弹窗窗口样式 */
    #uniqueAddCountdownDialog {
        transform: translate(100%, 0%);
        border-radius: 5px;
        color: #67c23a;
        text-shadow: 1px 1px 1px #000;
        background: rgba(255, 255, 255, 0.2);
        /* 半透明背景 */
        backdrop-filter: blur(10px);
        /* 模糊效果 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* 阴影效果 */
        border: none;

        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;

            ul {
                list-style: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                b {
                    color: #000000;
                    text-shadow: 1px 1px 1px #f2f1f1;
                }
            }
        }
    }

    /* 独特的倒计时容器uniqueCountdownContainer 结束 */
</style>

<body>
    <div id="uniqueCountdownContainer">独特的倒计时容器uniqueCountdownContainer</div>
</body>
<script>
    /* 独特的倒计时容器uniqueCountdownContainer 开始 */
    /* 原神元素颜色数据*/
    const elementColors = {
        "火": "#FF9933",
        "水": "#3399FF",
        "风": "#66c6ac",
        "雷": "#CC66FF",
        "草": "#66CC66",
        "冰": "#99CCFF",
        "岩": "#FFCC33"
    };
    document.getElementById('uniqueCountdownContainer').innerHTML = `
    <!-- 默认的倒计时DefaultCountdown -->
    <div id="DefaultCountdown"></div>
    <div class="uniqueCountdowns-Button">
               <!--动态倒计时区 -->
          <div id="uniqueCountdowns"></div>
          <!-- 按钮区 -->        
          <button class="uniqueAddButton" onclick="showAddCountdownDialog()" style="color: #67c23a;" class="uniqueAddCountdownButton">添加</button>
          <button class="uniqueEditButton " onclick="editSelectedCountdown()" style="display: none;color: #e6a23c;">改</button>
          <button class="uniqueDeleteButton " onclick="deleteSelectedCountdown()" style="display: none;color: red;">删</button>  
    </div>        
    <dialog id="uniqueAddCountdownDialog">
        <div>
            <form>
                <button id="uniqueCancelAdd" type="submit">取消添加</button>
                <br>
                <input type="text" id="uniquePromptInput" placeholder="提示信息">
                <br>
                <input type="datetime-local" id="uniqueDatetimeInput">
                <button id="uniqueSaveButton" onclick="saveCountdown()">保存</button>
            </form>         
            <ul>
                <b>主要节日时间表</b>
                <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>
        </div>
    </dialog>
`;
    /**
     * 显示添加倒计时对话框
     *
     * @returns 无返回值
     */
    function showAddCountdownDialog() {
        document.getElementById('uniqueAddCountdownDialog').showModal();
    }
    /**
     * 保存倒计时信息
     *
     * @returns 无返回值
     */
    function saveCountdown() {
        const promptInput = document.getElementById('uniquePromptInput').value.trim();
        const datetimeInput = document.getElementById('uniqueDatetimeInput').value;
        if (promptInput && datetimeInput) {
            // 将用户输入的日期时间格式转换为202408111731格式
            const formattedDatetime = datetimeInput.replace(/-/g, '').replace(/T/g, '').replace(/:/g, '');
            const countdownDiv = document.getElementById('uniqueCountdowns');
            const timestamp = Date.now();
            const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
            const countdownElement = document.createElement('div');
            countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
            countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
            countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${promptInput}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label>`;
            countdownDiv.appendChild(countdownElement);
            updateCountdown(`uniqueCountdown_${timestamp}`, new Date(datetimeInput.slice(0, 4), datetimeInput.slice(4, 6) - 1, datetimeInput.slice(6, 8), datetimeInput.slice(8, 10), datetimeInput.slice(10, 12)));
            // 存储倒计时信息到 localStorage
            localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify({
                prompt: promptInput,
                datetime: formattedDatetime
            }));
        } else {
            alert('请填写提示信息和目标日期');
        }
    }
    /**
     * 获取随机颜色
     *
     * @returns 返回原神元素对应的颜色
     */
    let colorIndex = 0; // 初始化颜色索引
    function getRandomColor() {
        const elements = Object.keys(elementColors); // 获取所有元素名称（原神元素颜色数据)
        colorIndex = (colorIndex + 1) % elements.length; // 递增索引，并在达到数组长度时重置为0
        return elementColors[elements[colorIndex]]; // 返回该元素对应的颜色
    }
    // 页面加载时从 localStorage 中恢复倒计时
    window.onload = function () {
        const countdowns = [];
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if (key.startsWith('uniqueCountdown_')) {
                const data = JSON.parse(localStorage.getItem(key));
                const timestamp = key.split('_')[1];
                countdowns.push({ timestamp, data });
            }
        }
        countdowns.sort((a, b) => a.timestamp - b.timestamp); // 按时间戳排序
        countdowns.forEach(({ timestamp, data }, index) => {
            const countdownDiv = document.getElementById('uniqueCountdowns');
            const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
            const countdownElement = document.createElement('div');
            countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
            countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
            if (index === 0) {
                countdownElement.style.borderTopLeftRadius = '5px';
                countdownElement.style.borderTopRightRadius = '5px';
            }
            if (index === countdowns.length - 1) {
                countdownElement.style.borderBottomLeftRadius = '5px';
                countdownElement.style.borderBottomRightRadius = '5px';
            }
            countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${data.prompt}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label>`;
            countdownDiv.appendChild(countdownElement);
            updateCountdown(`uniqueCountdown_${timestamp}`, new Date(data.datetime.slice(0, 4), data.datetime.slice(4, 6) - 1, data.datetime.slice(6, 8), data.datetime.slice(8, 10), data.datetime.slice(10, 12)));
        });
        // 添加默认倒计时
        const defaultCountdowns = [
            { prompt: "国庆节", datetime: "202410010000" },
            { prompt: "星尘兑换纠缠之缘时间", datetime: "202409010400" },
            { prompt: "幻想真境剧诗重置时间", datetime: "202409010400" },
            // 第一期幻想真境剧诗将于2024/09/01 04:00开启。
            // 第二期幻想真境剧诗将于2024/10/01 04:00开启。
            { prompt: "渊月螺旋重置时间", datetime: "202409160400" },
            { prompt: "限时祈愿", datetime: "202409171759" }
        ];
        const defaultCountdownDiv = document.getElementById('DefaultCountdown');
        defaultCountdowns.forEach(({ prompt, datetime }, index) => {
            const countdownElement = document.createElement('div');
            countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
            countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
            countdownElement.innerHTML = `<strong>${prompt}</strong>:<span id="defaultCountdown_${index}"></span>`;
            defaultCountdownDiv.appendChild(countdownElement);
            updateCountdown(`defaultCountdown_${index}`, new Date(datetime.slice(0, 4), datetime.slice(4, 6) - 1, datetime.slice(6, 8), datetime.slice(8, 10), datetime.slice(10, 12)));
        });
        // 应用最后一个倒计时的样式
        applyLastCountdownStyle();
    };
    /**
     * 更新倒计时
     *
     * @param elementId 倒计时元素ID
     * @param targetDate 目标日期
     */
    function updateCountdown(elementId, targetDate) {
        const countdownElement = document.getElementById(elementId);
        function update() {
            const now = new Date();
            const total = targetDate - now;
            const absTotal = Math.abs(total);
            const seconds = Math.floor((absTotal / 1000) % 60);
            const minutes = Math.floor((absTotal / 1000 / 60) % 60);
            const hours = Math.floor((absTotal / (1000 * 60 * 60)) % 24);
            const days = Math.floor(absTotal / (1000 * 60 * 60 * 24));
            const timeStr = `${days}天${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
            countdownElement.textContent = total <= 0 ? `已过去${timeStr}` : timeStr;
        }
        function padZero(num) {
            return num < 10 ? `0${num}` : num;
        }
        update();
        setInterval(update, 1000);
    }
    /**
    * 编辑已选中的倒计时
    *
    * @returns 无返回值
    */
    function editSelectedCountdown() {
        const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
        if (checkboxes.length === 0) return;
        checkboxes.forEach(checkbox => {
            const timestamp = checkbox.value;
            const data = JSON.parse(localStorage.getItem(`uniqueCountdown_${timestamp}`));
            if (data) { // 检查数据是否存在
                const newPrompt = prompt('请输入新的提示信息', data.prompt);
                const newDatetime = prompt('目标日期(YYYYMMDDHHMM,例如:202410010400)', data.datetime);
                if (newPrompt && newDatetime) {
                    // 删除旧的复选框
                    checkbox.parentNode.remove();
                    // 添加新的复选框并更新倒计时
                    localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify({
                        prompt: newPrompt,
                        datetime: newDatetime
                    }));
                    const countdownDiv = document.getElementById('uniqueCountdowns');
                    const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
                    const countdownElement = document.createElement('div');
                    countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
                    countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
                    countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${newPrompt}</strong>: <span id="uniqueCountdown_${timestamp}"></span></label>`;
                    countdownDiv.appendChild(countdownElement);
                    updateCountdown(`uniqueCountdown_${timestamp}`, new Date(newDatetime.slice(0, 4), newDatetime.slice(4, 6) - 1, newDatetime.slice(6, 8), newDatetime.slice(8, 10), newDatetime.slice(10, 12)));
                }
            } else {
                console.error(`Countdown data for timestamp ${timestamp} not found in localStorage.`);
            }
        });
        // 重置复选框状态
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        // 手动触发change事件以恢复最初状态
        document.dispatchEvent(new Event('change'));
    }
    /**
   * 删除选中的倒计时
   *
   * @returns 无返回值
   */
    function deleteSelectedCountdown() {
        const confirmDelete = confirm("确定要删除选中的倒计时吗？");
        if (confirmDelete) {
            const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
            checkboxes.forEach(checkbox => {
                const timestamp = checkbox.value;
                localStorage.removeItem(`uniqueCountdown_${timestamp}`);
                checkbox.parentNode.remove();
            });
            // 重置所有复选框状态
            document.querySelectorAll('.uniqueCountdownCheckbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            // 隐藏编辑和删除按钮，显示添加按钮
            document.querySelector('.uniqueEditButton').style.display = 'none';
            document.querySelector('.uniqueDeleteButton').style.display = 'none';
            document.querySelector('.uniqueAddButton').style.display = 'inline-block';
            // 手动触发change事件以恢复最初状态
            document.dispatchEvent(new Event('change'));
            // 重新检查并应用样式
            applyLastCountdownStyle();
        }
    }
    /**
     * 应用最后一个倒计时的样式
     */
    function applyLastCountdownStyle() {
        const countdownDiv = document.getElementById('uniqueCountdowns');
        const countdownElements = countdownDiv.querySelectorAll('div');
        if (countdownElements.length > 0) {
            const lastElement = countdownElements[countdownElements.length - 1];
            lastElement.style.borderBottomLeftRadius = '5px';
            lastElement.style.borderBottomRightRadius = '5px';
        }
    }
    // 监听复选框状态变化
    document.addEventListener('change', function (event) {
        const editButton = document.querySelector('.uniqueEditButton');
        const deleteButton = document.querySelector('.uniqueDeleteButton');
        const addCountdownButton = document.querySelector('.uniqueAddButton');
        const checkedCheckboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
        // 简化条件判断和样式设置
        const isChecked = checkedCheckboxes.length > 0;
        editButton.style.display = isChecked ? 'inline-block' : 'none';
        deleteButton.style.display = isChecked ? 'inline-block' : 'none';
        addCountdownButton.style.display = isChecked ? 'none' : 'inline-block';
        // 获取#uniqueCountdownContainer元素
        const countdownContainer = document.querySelector('#uniqueCountdownContainer');
        if (isChecked) {
            // 修改样式
            countdownContainer.style.backgroundColor = '#e63c3c';
            countdownContainer.querySelectorAll('label').forEach(label => {
                label.style.backgroundColor = '#e63c3c';
            });
            countdownContainer.querySelectorAll('strong').forEach(strong => {
                strong.style.color = '#ffffff';
                strong.style.textShadow = '2px 2px 2px #000000';
            });
            countdownContainer.querySelectorAll('span').forEach(span => {
                span.style.color = '#000000';
                span.style.textShadow = '1px 1px 1px #fffefe';
            });
            countdownContainer.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.style.display = 'inline-block';
            });
            if (index === countdowns.length - 1) {
                countdownElement.style.borderBottomLeftRadius = '5px';
                countdownElement.style.borderBottomRightRadius = '5px';
            }
        } else {
            // 恢复默认样式（如果需要）
            countdownContainer.style.backgroundColor = '';
            countdownContainer.querySelectorAll('label').forEach(label => {
                label.style.backgroundColor = '';
            });
            countdownContainer.querySelectorAll('strong').forEach(strong => {
                strong.style.color = '';
                strong.style.textShadow = '';
            });
            countdownContainer.querySelectorAll('span').forEach(span => {
                span.style.color = '';
                span.style.textShadow = '';
            });
            countdownContainer.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.style.display = '';
            });
        }
    });
    /* 独特的倒计时容器uniqueCountdownContainer 结束 */
</script>

</html>

与妖为邻
关注
  • 18
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
独特的倒计时容器uniqueCountdownContainer：修改了倒计时更好用好看了
lulei5153的博客
08-26 182
修复每次修改倒计时后，再点击选中复选框就多了一个复选框问题： 1.在编辑倒计时后，删除旧的复选框。 2.添加新的复选框并更新倒计时。
使用css3实现一个超浪漫的新年倒计时
xingyu_qie的专栏
12-21 4003
希望伴随着倒计时，2022年一切的不如意都早点烟消云散，但不管未来的2023年会怎么样，我们也应该勇敢的冲上去，哪怕失败了，至少我们冲过。
jquery/js实现一个网页同时调用多个倒计时(最新的)
热门推荐
Websites
11-25 61万+
jquery/js实现一个网页同时调用多个倒计时(最新的) 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! //js //js2 var plugJs={ stamp:0, tid:1, stampnow:Date.parse(new Date())/1000,//统一开始时间戳 ...
7 个优秀的 WordPress 倒计时插件
WP站长
11-17 1786
读者经常问我们如何在他们的网站上添加倒数计时器。倒数计时器是在您的网站上建立预期、兴奋和创造 FOMO 效果的好方法。 有很多不同的 WordPress 倒计时插件可以让您创建倒数计时器，那么您应该使用哪一个呢？ 在本文中，我们将分享适用于 WordPress 的最佳倒计时插件，并解释每个插件的主要功能。 目录 什么是倒数计时器插件以及何时需要它？1. OptinMonster2. SeedProd3.Countdown Timer Ultimate 倒数计时器终极版4.Countdown Bu
vue中多个倒计时实现代码实例
10-17
在Vue.js中实现多个倒计时功能，通常需要将倒计时逻辑封装成一个可复用的方法，以便在不同的组件或列表中应用。以下是一个详细的知识点解释： 1. **数据结构**： 首先，我们需要一个数据结构来存储每个倒计时的...
K线倒计时指标_倒计时指标_倒计时_K线倒计时指标_k线倒计时_K._
10-03
倒计时指标就是为了让交易者了解这个时间段还有多少剩余，以便在最佳时机下单。 倒计时指标的工作方式是实时计算并显示当前K线的剩余秒数。这样，交易者可以更准确地把握买卖信号出现的时机，特别是在短时间内快速...
60s倒计时_STM32倒计时_STM32倒计时_倒计时_complex1wz
09-10
在这个倒计时应用中，我们可以选择一个支持自动重载的定时器，比如TIM2，工作在向上计数模式。定时器在预设的时间间隔（即60秒）后产生中断，然后重置计数值并更新显示屏。 配置定时器时，主要包括以下几个步骤： 1...
节日透明倒计时，春节、劳动节、国庆节、端午节、中秋节倒计时
03-13
在本文中，我们将深入探讨如何使用C#编程语言来实现一个节日透明倒计时的应用程序。这个应用程序能够自动识别即将到来的节日，如春节、劳动节、国庆节、端午节和中秋节，并显示相应的倒计时。我们将围绕以下几个核心...
元旦倒计时代码+（HTML+css+JavaScript + canvas）写的一个 2023 年跨年倒计时代码
01-13
前端语言（HTML+css+JavaScript + canvas）写的一个 2023 年跨年倒计时代码 倒计时日期格式：月-日-时-分-秒 也可以自定义日期格式 自定义添加祝福语等 代码时按照元旦作为计算日期 也可以按照农历新年作为日期格式
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 312
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
HTML中自定义属性并通过JS获取属性值
最新发布
2301_79858914的博客
08-27 189
是的，HTML可以自定义属性。自定义属性的语法是使用data-前缀，后面跟上自定义的属性名。例如：
HTML DOM 对象
lly202406的博客
08-23 372
HTML DOM对象是JavaScript与HTML文档交互的桥梁。通过DOM，开发者可以轻松地访问和操作页面元素，实现动态内容和交互功能。掌握DOM是前端开发的重要技能之一。
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
2301_78945238的博客
08-23 447
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
简单实现进度条效果（vue2）
weixin_43811753的博客
08-20 522
如果用echarts或者其他图表来写个进度条有点大材小用，所以直接简单html、js写一下就可以；以下代码基于vue2，部分代码来自国内直连。
【HTML】模拟消息折叠效果【附源代码】
Young_Pro的博客
08-26 944
通过 Html 搭配 CSS 和 JavaScript 模拟消息折叠效果，点击展开消息，再次点击即可收起消息
html快速入门
m0_52049533的博客
08-22 529
/
【HTML】DOCTYPE作用
DX390609的博客
08-22 268
DOCTYPE不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给浏览器。有多少浏览器就会有多少种展示方式，因此要提高浏览器兼容性就必须重视。CSS1 Compat：标准模式（Strick mode），浏览器使⽤W3C的标准解析渲染⻚⾯。BackCompat：怪异模式(混杂模式)(Quick mode)，默认模式，⻚⾯以⼀种⽐较宽松的向后兼容的⽅式显示。，告诉浏览器文档的类型，便于解析文档。不同渲染模式会影响浏览器对CSS代码甚至JS脚本的解析。
Java学习Day33：HTML 第四章：大战虎先锋（js）
weixin_51721783的博客
08-24 794
JS语句;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值