一个倒计时的自定义组件 | A countdown custom component

[frostime]

Add this code inside custom

/**
This script is used for sy-query-view plugin to define user's customized view components. Type declarations as follows:

interface ICustomView {
    use: (dv: IDataView) => {
        render: (container: HTMLElement, ...args: any[]) => HTMLElement; //Create the user custom view.
        dispose?: () => void;  // Unmount hook for the user custom view.
    },
    alias?: string[]; // Alias name for the custom view
}

Once correctly registerd, you can use the custom view like this:

dv.addexample(1);
dv.addcols([dv.table(childs), dv.Example(2)]); //use alias
 */

const custom = {
    countdown: {
        use: (dv) => {
            return {
                render: (container, startDateStr, targetDateStr) => {
                    // 创建容器
                    const countdownContainer = document.createElement('div');
                    Object.assign(countdownContainer.style, {
                        maxWidth: '800px',
                        margin: '5vh auto',
                        padding: '2rem',
                        //backgroundColor: '#f8f9fa',
                        backgroundColor: 'var(--b3-theme-surface-light)',
                        borderRadius: '15px',
                        //boxShadow: '0 10px 30px rgba(0,0,0,0.1)'
                        boxShadow: '0 10px 15px 3px var(--b3-theme-primary-lightest)'
                    });

                    // 解析日期参数
                    // const parseDate = (str) => {
                    //     const isoRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2})?$/;
                    //     return new Date(isoRegex.test(str) ? str : `${str}T00:00:00`);
                    // };

                    // 计算时间差
                    const startDate = new Date(startDateStr);
                    const targetDate = new Date(targetDateStr);
                    const now = new Date();
                    const totalDuration = targetDate - startDate;
                    const timeDiff = targetDate - now;

                    // 时间单位计算
                    const days = Math.max(0, Math.floor(timeDiff / 864e5));
                    const hours = Math.max(0, Math.floor((timeDiff % 864e5) / 36e5));
                    const minutes = Math.max(0, Math.floor((timeDiff % 36e5) / 6e4));
                    const seconds = Math.max(0, Math.floor((timeDiff % 6e4) / 1e3));

                    // 百分比计算
                    const remainingPercent = totalDuration > 0 
                        ? Math.max(0, Math.min(100, (timeDiff / totalDuration) * 100)).toFixed(1)
                        : 0;

                    // 创建进度条
                    const progressContainer = document.createElement('div');
                    Object.assign(progressContainer.style, {
                        margin: '2rem 0',
                        padding: '0 1rem'
                    });

                    const progressBar = document.createElement('div');
                    Object.assign(progressBar.style, {
                        height: '12px',
                        backgroundColor: '#e9ecef',
                        borderRadius: '6px',
                        overflow: 'hidden'
                    });

                    const progressFill = document.createElement('div');
                    Object.assign(progressFill.style, {
                        height: '100%',
                        background: 'linear-gradient(90deg, #4facfe 0%, #00f2fe 100%)',
                        width: `${remainingPercent}%`
                    });

                    const progressText = document.createElement('div');
                    Object.assign(progressText.style, {
                        textAlign: 'center',
                        marginTop: '0.5rem',
                        color: '#6c757d',
                        fontSize: '0.9em',
                        fontWeight: '500'
                    });
                    progressText.textContent = `${remainingPercent}% 剩余 (${startDate.toLocaleDateString()} - ${targetDate.toLocaleDateString()})`;

                    // 构建进度条结构
                    progressBar.appendChild(progressFill);
                    progressContainer.appendChild(progressBar);
                    progressContainer.appendChild(progressText);

                    // 创建时间轴
                    const timeline = document.createElement('div');
                    Object.assign(timeline.style, {
                        display: 'flex',
                        justifyContent: 'space-between',
                        padding: '2rem 0'
                    });

                    // 时间单位定义
                    const timeUnits = [
                        { name: 'days', value: days, color: '#3498db' },
                        { name: 'hours', value: hours.toString().padStart(2, '0'), color: '#2ecc71' },
                        { name: 'minutes', value: minutes.toString().padStart(2, '0'), color: '#f1c40f' },
                        { name: 'seconds', value: seconds.toString().padStart(2, '0'), color: '#e74c3c' }
                    ];

                    // 创建时间单位块
                    timeUnits.forEach(unit => {
                        const timeBlock = document.createElement('div');
                        Object.assign(timeBlock.style, {
                            flex: '1',
                            textAlign: 'center',
                            padding: '1.5rem',
                            //backgroundColor: 'white',
                            backgroundColor: 'var(--b3-theme-background)',
                            margin: '0 1rem',
                            borderRadius: '12px',
                            boxShadow: '0 4px 6px rgba(0,0,0,0.05)'
                        });

                        const timeNumber = document.createElement('div');
                        Object.assign(timeNumber.style, {
                            fontSize: '2.5em',
                            fontWeight: '700',
                            fontFamily: 'Arial, sans-serif',
                            color: unit.color
                        });
                        timeNumber.textContent = unit.value;

                        const timeUnitText = document.createElement('span');
                        Object.assign(timeUnitText.style, {
                            color: '#95a5a6',
                            display: 'block',
                            marginTop: '0.5rem',
                            textTransform: 'uppercase',
                            letterSpacing: '1px'
                        });
                        timeUnitText.textContent = unit.name;

                        timeBlock.appendChild(timeNumber);
                        timeBlock.appendChild(timeUnitText);
                        timeline.appendChild(timeBlock);
                    });

                    // 组装完整结构
                    countdownContainer.appendChild(progressContainer);
                    countdownContainer.appendChild(timeline);
                    container.appendChild(countdownContainer);

                    return countdownContainer;
                }
            };
        },
        alias: ['countdowntimer']
    }
}

export default custom;

Usage, in query embed block:

//!js
const query = async () => {
    let dv = Query.DataView(protyle, item, top);
    dv.addcountdown('2025-02-26', '2025-03-07');

    dv.render();
}

return query();

效果如下: