最新消息
哪吒面板添加其它信息代码
哪吒面板添加其它信息代码
3个月前 8 阅读
  • 首页
  • /
  • 学习
  • /
  • 正文
  • 哪吒面板添加其它信息代码,两种方式中的小鸡多少都可以自由增减,要举一反三。
    样式一:

    <script>
    window.onload = function() {
        const affLinks = {
            1: { price: '⏰2024.10.16;💰9.5$/年'},
            2: { price: '⏰2024.1.29;💰7¥/年'},
            3: { price: '⏰2025.6.5;💰8.8$/年'},
            4: { price: '⏰2024.1.8;💰7¥/年'},
            5: { price: '⏰2025.8.19;💰4.99¥/月'}
    
        };
    
        const createPriceTag = (price) => {
            if (!price) return null; 
            const $priceTag = document.createElement('span');
            $priceTag.setAttribute('style', 'background-color: rgba(30, 144, 255, 0.8); color: white; padding: 3px 6px; border-radius: 5px; margin-left: 5px;');
            $priceTag.textContent = price;
            return $priceTag;
        };
    
        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: 8px; right: 10px; display: flex; align-items: center;');
    
                let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null);
                if ($priceTag) {
                    $aLinkBox.appendChild($priceTag);
                }
                
                card.appendChild($aLinkBox);
            }
        });
    };
    </script>
    

    样式二

    <script>
    window.onload = function(){
    
        const extraData = {
            1: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16;'},
            2: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16;'},
            3: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16;'},
            4: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16;'},
            5: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16;'} 
        }
        const cats = document.querySelectorAll('.ui.accordion');
        cats.forEach((e, i)=>{
            let $catsTitle = e.querySelector('.title');
            let ct = $catsTitle.innerText;
            ct = ct.trim(); 
    
            let $itemCard = e.querySelectorAll('.ui.card');
            let uiCardCount = $itemCard.length;
            $catsTitle.innerHTML = $catsTitle.innerHTML.replace(ct, ct+ ' ('+ uiCardCount +')');
            $itemCard.forEach((ee, ii)=>{
                let $content = ee.querySelector('.content');
                let $descriptionGrid = ee.querySelector('.description .ui.grid');
                let $itemTitle = $content.querySelector('.header');
                let id = ee.getAttribute('id');
                if(extraData[id]){
                    let pid = extraData[id].pid;
                    pid = parseInt(pid);
                    let shop = extraData[id].shop;
                    let price = extraData[id].price;
                    let start = extraData[id].start;
                    let expire = extraData[id].expire;
                    let expire1 = extraData[id].expire1;
                    let cycle = extraData[id].cycle;
    
                    if(price){
                        let $priceL = document.createElement('div');
                        $priceL.setAttribute('class', 'three wide column');
                        $priceL.innerHTML = '其它';
                        $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3]);
                        let $priceR = document.createElement('div');
                        $priceR.setAttribute('class', 'thirteen wide column');
                        $priceR.innerHTML = '<div class="ui blue label">'+cycle+ expire1 +price +'</a></div>';
                        $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3])
                    }
    
                }
            });
        });
    }
    </script>
    

    式样三【在用完整,加入续期和其它】:

    <style>
        :root {
            --popup-filter: blur(10px);
            --bb: blur(15px) brightness(110%);
            --lc-color-light: rgba(255, 255, 255, 0.7);
            --bc-color-light: rgba(255, 255, 255, 0.1);
            --the-color-light: rgba(255, 255, 255, 0.4);
            --he-color-light: rgba(255, 255, 255, 0.5);
            --message-color-light: rgb(22, 22, 22, 1); 
            --popup-color-light:rgba(235, 235, 235, 0.6);
    
            --bc-color-dark: rgba(0, 0, 0, 0.3);
            --lc-color-dark: rgba(55, 55, 55, 0.8);
            --the-color-dark: rgba(70, 70, 70, 0.1);
            --he-color-dark: rgba(35, 35, 35, 0.7);
            --message-color-dark: rgb(235, 235, 235, 0.8);
            --popup-color-dark:rgba(78, 78, 78, 0.6);
        }
    
        /* 背景图片 */
        body {
            content: " " !important;
            background: fixed !important;
            z-index: -1 !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            background-position: top !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
            background-image: url(https://121.freewebhostmost.com/) !important;
            font-family: Arial,Helvetica,sans-serif !important;
        }
    
        /* 大卡片 */
        #app .ui.fluid.accordion {
            background-color: #fbfbfb26 !important;
            border-radius: 0.4rem !important;
        }
    
        /* 小卡片 */
        .ui.four.cards>.card {
            border-radius: 0.6rem !important;
            background-color: #fafafaa3 !important;
        }
    
        /* 有点累状态进度条颜色 */
        .ui.progress.warning .bar {
            background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); !important;
        }
    
        /* 高负载状态进度条颜色 */
        .ui.progress.error .bar {
            background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);important;
        }
    
        /* 高负载状态进度条颜色续费专用 */
        .ui.progress.error1 .bar {
            background-image: linear-gradient(to right, #00CD00 0%, #008B00 100%);important;
        }
    </style>
    
    <script>
    window.onload = function() {
        const extraData = {
            1: {
                pid: 23,
                shop: 'CC',
                price: ' 💰9.5$ / 年;',
                cycle: '⏰续期:',
                cycle1: '⏰',
                cycle2: '月流量:',
                cycle3: '3T ',
                cycle4: '⌚',
                start: '12/13/2023',
                expire: '12/13/2024',
                expire1: '2024.12.13;'
            },
            2: {
                pid: 23,
                shop: 'CC',
                price: ' 💰9.5$ / 年;',
                cycle: '⏰续期:',
                cycle1: '⏰',
                cycle2: '月流量:',
                cycle3: '3T ',
                cycle4: '⌚',
                start: '12/13/2023',
                expire: '12/13/2024',
                expire1: '2024.12.13;'
            },
            3: {
                pid: 23,
                shop: 'CC',
                price: ' 💰9.5$ / 年;',
                cycle: '⏰续期:',
                cycle1: '⏰',
                cycle2: '月流量:',
                cycle3: '3T ',
                cycle4: '⌚',
                start: '12/13/2023',
                expire: '12/13/2024',
                expire1: '2024.12.13;'
            },
    
        }
    
        const cats = document.querySelectorAll('.ui.accordion');
        cats.forEach((e, i) => {
            let $catsTitle = e.querySelector('.title');
            let ct = $catsTitle.innerText;
            ct = ct.trim(); 
    
            let $itemCard = e.querySelectorAll('.ui.card');
            let uiCardCount = $itemCard.length;
            $catsTitle.innerHTML = $catsTitle.innerHTML.replace(ct, ct + ' (' + uiCardCount + ')');
            
            $itemCard.forEach((ee, ii) => {
                let $content = ee.querySelector('.content');
                let $descriptionGrid = ee.querySelector('.description .ui.grid');
                let $itemTitle = $content.querySelector('.header');
                let id = ee.getAttribute('id');
    
                if (extraData[id]) {
                    let pid = extraData[id].pid;
                    let shop = extraData[id].shop;
                    let price = extraData[id].price;
                    let start = extraData[id].start;
                    let expire = extraData[id].expire;
                    let expire1 = extraData[id].expire1;
                    let cycle = extraData[id].cycle;
                    let cycle1 = extraData[id].cycle1;
                    let cycle2 = extraData[id].cycle2;
                    let cycle3 = extraData[id].cycle3;
                    let cycle4 = extraData[id].cycle4;
    
    
                    if (price) {
                        let $priceL = document.createElement('div');
                        $priceL.setAttribute('class', 'three wide column');
                        $priceL.innerHTML = '续期';
                        $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);
    
                        let remainingTime = '';
                        if (expire !== '∞') {
                            let endTime = new Date(expire).getTime();
                            let nowTime = new Date().getTime();
                            let timeDiff = endTime - nowTime;
                            let daysRemaining = Math.ceil(timeDiff / (1000 * 3600 * 24));
                            remainingTime = daysRemaining > 0 ? `<span style="color: red;"> 剩${daysRemaining}天</span>` : '<span style="color: red;">(已过期)</span>';
                        }
    
                        let $priceR = document.createElement('div');
                        $priceR.setAttribute('class', 'thirteen wide column');
                        $priceR.innerHTML = '<div class="ui blue label">' + cycle1 + expire1 + cycle4  + remainingTime + '</div>';
                        $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);
                    }
    
    
    
                    if (price) {
                        let $priceL = document.createElement('div');
                        $priceL.setAttribute('class', 'three wide column');
                        $priceL.innerHTML = '其它';
                        $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);
    
                        let $priceR = document.createElement('div');
                        $priceR.setAttribute('class', 'thirteen wide column');
                        $priceR.innerHTML = '<div class="ui blue label">' + price + ' ' + cycle2 + ' ' + cycle3 + '</div>';
                        $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);
                    }
                }
            });
        });
    }
    </script>
    
    <style>
            body {
                overflow-y: scroll;
            }
    </style>
    <!-- 返回顶部按钮 -->
    <button id="topBtn" class="top-btn" style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999; background-color: #ffcc00; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer;">▲</button>
    
    <script>
        // 获取返回顶部按钮
        const topBtn = document.getElementById('topBtn');
    
        // 当DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 监听滚动事件
            window.onscroll = function() {
                scrollFunction();
            };
    
            // 显示或隐藏返回顶部按钮
            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    topBtn.style.display = "block";
                } else {
                    topBtn.style.display = "none";
                }
            }
    
            // 当点击按钮时滚动到顶部
            topBtn.addEventListener('click', function() {
                document.body.scrollTop = 0; // 对于 Safari
                document.documentElement.scrollTop = 0; // 对于 Chrome, Firefox, IE 和 Opera
            });
        });
    </script>

    01

    0
    那年今日

    评语 (0)

    取消
    您是第 31042 位访客