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

基于 @星之子 的脚本进行了优化和美化
原帖指路：【油猴脚本】勋章商城展示内部编号、价格、库存余量[/url]

界面美化：

• 价格根据货币类型（金币、血液、咒术）显示不同颜色（金色、红色、紫色）。
• 编号和库存信息分别显示在勋章左下角和右下角。
  
  @Name
  
  

1. // ==UserScript==
   
2. // @name         勋章：商城编号价格库存量显示
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      0.3
   
5. // @description  从mytip提取信息并显示在指定位置
   
6. // @author       You
   
7. // @match        https://www.gamemale.com/plugin.php?id=wodexunzhang%3Ashowxunzhang&fid=*
   
8. // @match        https://www.gamemale.com/wodexunzhang-showxunzhang.html
   
9. // @grant        none
   
10. // ==/UserScript==
    
11. 
    
12. (function () {
    
13.   'use strict';
    
14. 
    
15.   // 创建信息显示样式
    
16.   const style = document.createElement('style');
    
17.   style.textContent = `
    
18.     .badge-info {
    
19.       font-family: Noto Sans SC, Microsoft Yahei, Arial, sans-serif;
    
20.       color: #333;
    
21.     }
    
22.     .myimg p:nth-of-type(1) {
    
23.       height: 23px !important;
    
24.     }
    
25.     .gold {
    
26.       color: #c7a800;
    
27.     }
    
28.     .blood {
    
29.       color: #ff4343;
    
30.     }
    
31.     .spells {
    
32.       color: #4b0082;
    
33.     }
    
34.     .info {
    
35.       position: absolute;
    
36.       left: 2px;
    
37.       bottom: -1px;
    
38.     }
    
39.     .infoR{
    
40.       position: absolute;
    
41.       right: 2px;
    
42.       bottom: -1px;
    
43.     }
    
44.   `;
    
45.   document.head.appendChild(style);
    
46. 
    
47. 
    
48.   // 处理每个勋章块
    
49.   document.querySelectorAll('.myblok').forEach(blok => {
    
50.     blok.style.height = '150px';
    
51.     const mytip = blok.querySelector('.mytip');
    
52.     if (!mytip) return;
    
53. 
    
54.     // 提取编号
    
55.     const tipId = mytip.id.replace('my', '');
    
56. 
    
57.     // 提取价格
    
58.     const priceElement = Array.from(mytip.querySelectorAll('p.jiage')).find(p =>
    
59.       p.textContent.includes('购买价格')
    
60.     );
    
61.     console.log(priceElement?.querySelector('b')?.textContent);
    
62. 
    
63.     const [currency, price] = priceElement?.querySelector('b')?.textContent.split(/\s+/);
    
64. 
    
65.     // 提取库存
    
66.     const stockElement = Array.from(mytip.querySelectorAll('p.jiage')).find(p =>
    
67.       p.textContent.includes('剩余库存')
    
68.     );
    
69.     const stock = stockElement?.querySelector('b')?.textContent || '无库存';
    
70. 
    
71.     // 创建信息显示元素
    
72.     const infoDiv = document.createElement('p');
    
73.     infoDiv.className = 'badge-info';
    
74.     infoDiv.innerHTML = `<span class="info">ID：${tipId}</span><span class="infoR">库存：${stock}</span>`;
    
75. 
    
76.     // 定位插入位置
    
77.     const myimg = blok.querySelector('.myimg');
    
78.     const targetP = myimg.querySelector('p:nth-of-type(2)');
    
79.     const priceDiv = document.createElement('span');
    
80.     priceDiv.classList.add({ 金币: 'gold', 血液: 'blood', 咒术: 'spells' }[currency]);
    
81.     priceDiv.textContent = `${price} ${currency}`;
    
82.     myimg.querySelector('p').insertAdjacentElement('afterend', priceDiv);
    
83. 
    
84. 
    
85. 
    
86.     if (targetP) {
    
87.       targetP.insertAdjacentElement('afterend', infoDiv);
    
88.     } else {
    
89.       myimg.appendChild(infoDiv);
    
90.     }
    
91.   });
    
92. })();

复制代码

如果喜欢请去原贴点个追随吧

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

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

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

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

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

我就喜欢用花里胡哨的功能脚本

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

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

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

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

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

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

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

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

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

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

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

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

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