【蛇运长虹】勋章信息展示美化

风岚发表于 2025-2-12 21:17:20

本帖最后由风岚于 2025-2-12 21:20 编辑

基于 @星之子的脚本进行了优化和美化
原帖指路：【油猴脚本】勋章商城展示内部编号、价格、库存余量
界面美化：
[*]价格根据货币类型（金币、血液、咒术）显示不同颜色（金色、红色、紫色）。
[*]编号和库存信息分别显示在勋章左下角和右下角。

@Name
// ==UserScript==
// @name       勋章：商城编号价格库存量显示
// @namespace http://tampermonkey.net/
// @version    0.3
// @description从mytip提取信息并显示在指定位置
// @author    You
// @match    https://www.gamemale.com/plugin.php?id=wodexunzhang%3Ashowxunzhang&fid=*
// @match    https://www.gamemale.com/wodexunzhang-showxunzhang.html
// @grant    none
// ==/UserScript==

(function () {
'use strict';

// 创建信息显示样式
const style = document.createElement('style');
style.textContent = `
.badge-info {
   font-family: Noto Sans SC, Microsoft Yahei, Arial, sans-serif;
   color: #333;
}
.myimg p:nth-of-type(1) {
   height: 23px !important;
}
.gold {
   color: #c7a800;
}
.blood {
   color: #ff4343;
}
.spells {
   color: #4b0082;
}
.info {
   position: absolute;
   left: 2px;
   bottom: -1px;
}
.infoR{
   position: absolute;
   right: 2px;
   bottom: -1px;
}
`;
document.head.appendChild(style);

// 处理每个勋章块
document.querySelectorAll('.myblok').forEach(blok => {
blok.style.height = '150px';
const mytip = blok.querySelector('.mytip');
if (!mytip) return;

// 提取编号
const tipId = mytip.id.replace('my', '');

// 提取价格
const priceElement = Array.from(mytip.querySelectorAll('p.jiage')).find(p =>
   p.textContent.includes('购买价格')
);
console.log(priceElement?.querySelector('b')?.textContent);

const = priceElement?.querySelector('b')?.textContent.split(/\s+/);

// 提取库存
const stockElement = Array.from(mytip.querySelectorAll('p.jiage')).find(p =>
   p.textContent.includes('剩余库存')
);
const stock = stockElement?.querySelector('b')?.textContent || '无库存';

// 创建信息显示元素
const infoDiv = document.createElement('p');
infoDiv.className = 'badge-info';
infoDiv.innerHTML = `<span class="info">ID：${tipId}</span><span class="infoR">库存：${stock}</span>`;

// 定位插入位置
const myimg = blok.querySelector('.myimg');
const targetP = myimg.querySelector('p:nth-of-type(2)');
const priceDiv = document.createElement('span');
priceDiv.classList.add({ 金币: 'gold', 血液: 'blood', 咒术: 'spells' });
priceDiv.textContent = `${price} ${currency}`;
myimg.querySelector('p').insertAdjacentElement('afterend', priceDiv);

if (targetP) {
   targetP.insertAdjacentElement('afterend', infoDiv);
} else {
   myimg.appendChild(infoDiv);
}
});
})();如果喜欢请去原贴点个追随吧

凯诺斯 发表于 2025-2-12 21:27:23

很实用的脚本，勋章信息显示变得更加直观了:loveliness:

亚洛斯 发表于 2025-2-12 21:33:04

很赞的优化改动，信息界面看着更加的直接和清晰了{:6_195:}

克莱因蓝 发表于 2025-2-12 21:41:50

感谢大佬惹又能更直观的看清楚勋章的详情了

娱乐法师火布偶 发表于 2025-2-12 21:54:56

区分颜色确实是更加醒目了

zibatco2 发表于 2025-2-12 21:59:28

试了一下还不错感觉更直观且美观~感谢楼主分享很实用! {:4_91:}

cdcai 发表于 2025-2-12 22:06:37

我就喜欢用花里胡哨的功能脚本{:4_114:}

Wanda 发表于 2025-2-12 22:07:16

这个很好噜，可以直接看到价格更直观

CooperAlbort 发表于 2025-2-12 22:07:59

好心动的代码，但我不太懂怎么用这些，请问论坛内有哪里专门讲怎么用脚本的吗{:4_92:}

oct 发表于 2025-2-12 22:08:31

感謝樓主變得很好辨識了.
但我想要 ""自己庫存"""勳章中知道是屬於哪一類的勛章..
因為每次我要買新的他都說 XXX類的達到上限...
我也不知道我要賣掉哪一個才能買新的...根本不知道勳章種類:'(

猪头螺旋棒 发表于 2025-2-12 22:08:47

挺实用的不用一个个点进去看了，省掉很多时间

恶之华 发表于 2025-2-12 22:20:11

好东西！24年真的是泥潭脚本大爆发的时代！

归北溟 发表于 2025-2-12 22:26:21

感谢分享！确实更实用了，我要成为勋章领域大神！

莲一发表于 2025-2-12 22:31:08

在原版上更加美观了欸，而且库存和编号也标注出来了不然搞混了:lol

2297988 发表于 2025-2-12 22:50:06

看着很不错捏，这下可以直接看到价格了，很方便勋章人的设计~

阿睿发表于 2025-2-12 23:02:25

真的好实用！这种使用颜色管理之后就显而易见了，不需要再点开看了，简直懒人福音，太方便了

毛茸茸兽兽 发表于 2025-2-12 23:14:05

吼～右下角直接看库存咩～更清晰直观了点欸

Colten 发表于 2025-2-12 23:30:02

剛剛去試試看了，看起來真的美觀好多，謝謝大佬

parting 发表于 2025-2-12 23:36:54

终于可以直接输入数字而不是把名字打进去去勋章博物馆查资料了:lol至于库存吗，好的抢不到，一般的不用抢，只能这么说了;P

桀桀桀 发表于 2025-2-12 23:38:03

到时候买勋章的时候方便一点了，更好考虑要不要剁手了（bushi）

页: [1] 2 3

GameMale's Archiver

【蛇运长虹】勋章信息展示美化