哪吒面板 添加价格和购买链接按钮代码 Default主题

改了一下，可以显示距离小鸡到期日期还有多少天，使用教程和上面一样，改代码中的服务器id和日期就行了，想要实现其他具体效果可以自己调整代码，如图：

更新：
后续代码优化请直接看我 楼下chengdada（30层楼主） 的吧，他的功能更完善，我就不更新了

代码如下：

<script>
    window.onload = function() {
        const affLinks = {
            1: {
                expiration: '🕐2024/12/31' 
            },
            2: { 
                expiration: '🕐2025/3/31'
            },
            3: { 
                expiration: '🕐2024/8/31'
            },
        };
    
        const createPriceTag = (price) => {
            if (!price) return null; 
            const $priceTag = document.createElement('span');
            $priceTag.setAttribute('style', 'background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 6px; border-radius: 3px; margin-left: 5px;');
            $priceTag.textContent = price;
            return $priceTag;
        };
    
        const createExpirationTag = (expiration) => {
            if (!expiration) return null; 
            const $expirationTag = document.createElement('span');
            $expirationTag.setAttribute('style', 'background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 6px; border-radius: 3px; margin-left: 5px;');
            $expirationTag.textContent = expiration;
            return $expirationTag;
        };
    
        const uiCards = document.querySelectorAll('.ui.card');
        uiCards.forEach((card) => {
            let cardId = card.id;
    
            if (cardId && affLinks[cardId]) {
                let $aLinkBox = document.createElement('div');
                $aLinkBox.setAttribute('style', 'position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center;');
    
                let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null);
                if ($priceTag) {
                    $aLinkBox.appendChild($priceTag);
                }
                
                let $expirationTag = createExpirationTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].expiration : null);
                if ($expirationTag) {
                    // 计算距离目标日期的天数
                    const currentDate = new Date();
                    const targetDate = new Date($expirationTag.textContent.substring(2)); // 截取日期字符串，去除表情符号
                    const timeDifference = targetDate.getTime() - currentDate.getTime();
                    const daysDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
                    // 显示距离目标日期的天数
                    $expirationTag.textContent = '剩余天数：' + daysDifference + '天';
                    
                    $aLinkBox.appendChild($expirationTag);
                }
    
                card.appendChild($aLinkBox);
            }
        });
    };
    </script>

倒计时

<script>
window.onload = function() {
    const affLinks = {
        37: {
            expiration: '2024/11/8 00:00:00' // 修改过期时间为2024年11月8日
        },
        14: { 
            expiration: '2024/7/26 00:00:00' // 修改过期时间为2024年7月26日
        },
        15: { 
            expiration: '2024/7/26 00:00:00' // 修改过期时间为2024年7月26日
        },
        35: { 
            expiration: '2024/7/26 00:00:00' // 修改过期时间为2024年7月26日
        },
        52: { 
            expiration: '2024/6/9 00:00:00' // 修改过期时间为2024年6月9日
        },
        53: { 
            expiration: '2024/6/9 00:00:00' // 修改过期时间为2024年6月9日
        },
    };

    const createPriceTag = (price) => {
        if (!price) return null; 
        const $priceTag = document.createElement('span');
        $priceTag.setAttribute('style', 'background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 6px; border-radius: 3px; margin-left: 5px;');
        $priceTag.textContent = price;
        return $priceTag;
    };

    const createCountdownTag = (expiration) => {
        const $countdownTag = document.createElement('span');
        $countdownTag.setAttribute('style', 'background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 6px; border-radius: 3px; margin-left: 5px;');
        
        const calculateCountdown = () => {
            const expirationDate = new Date(expiration).getTime();
            const now = new Date().getTime();
            if (now > expirationDate) { // 如果当前时间超过了过期时间，则已过期
                return '已过期';
            }
            const distance = expirationDate - now;
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
        };
        
        const updateCountdown = () => {
            $countdownTag.textContent = calculateCountdown();
            setTimeout(updateCountdown, 1000);
        };
        
        updateCountdown();
        
        return $countdownTag;
    };

    const uiCards = document.querySelectorAll('.ui.card');
    uiCards.forEach((card) => {
        let cardId = card.id;

        if (cardId && affLinks[cardId]) {
            let $aLinkBox = document.createElement('div');
            $aLinkBox.setAttribute('style', 'position: absolute; bottom: 20px; right: 10px; display: flex; align-items: center;');

            let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null);
            if ($priceTag) {
                $aLinkBox.appendChild($priceTag);
            }
            
            let expiration = (typeof affLinks[cardId] === 'object') ? affLinks[cardId].expiration : null;
            let $countdownTag = createCountdownTag(expiration);
            if ($countdownTag) {
                $aLinkBox.appendChild($countdownTag);
            }

            card.appendChild($aLinkBox);
        }
    });
};
</script>

玩出花来了…

这个好

啊，看上探针小鸡直接买

好家伙，跟我的想法不谋而合了，要是能再加个到期时间就好了，购买同款倒是不咋需要

@你看起来真好笑 #4 你直接把按钮的文字改成到期时间不就好了

l@houmusic #6 是的，但我不需要链接可点击，现在正在试着改哈哈哈

只有这个主题能用吗,serverstatus可以吗

@Sm1rkBoy #8
不行

@EternalFuture #0 没看懂，这要是多个服务器怎么弄，怎么对应的