【勋章工具】批量赠送可多选 升级版 ★
本帖最后由 星之子 于 2024-8-15 07:24 编辑功能简介
距离上一个【勋章工具】批量赠送之单人可多选版已经有快两年的时间了，这期间祈祷术变成了只能自购，新增了杀意人偶，于是便在凯登大佬的基础上做了如下改进：
视觉效果
[*]添加了（夹带私货的）Rene Magritte的画，可在代码中替换background-image中的url指定你想要的背景
[*]添加了主体悬停透明度变化、背景模糊等效果
[*]调整页面布局使之居中
[*]先按照是否可以自行购买分组，然后按【时长-金币低到高-咒术低到高】排序（强迫症的兴趣爱好）
[*]给每个勋章添加图片说明
易用性
[*]不会自动勾选（原来的版本甚至勾了糖果盒）
[*]加大了checkbox，点击起来更舒适了
[*]在每个勋章前添加了价格和时长信息
[*]添加了计算总价的功能，实时统计本次赠礼的金币和咒术消耗
添改增补
[*]添加了新出的沙溢人偶（白展堂：？）
[*]更正了茉香啤酒的名称
[*]如果页面下方出现一个调色板，这很可能是AdGuard这个浏览器插件的锅，可以尝试屏蔽#color_picker这个元素
HTML代码
先放个本体吧： 存到本地固定位置后打开然后浏览器收藏一下，一样用（
不知道为啥本地写好的html和泥潭执行的不太一样，直接贴代码的外观和没用css调教过一样，那我不白干活了！
用html压缩工具整理了一下，比直接贴代码恢复了不少css效果，但悬停的透明度平滑变换仍然无法还原，索性放弃了。编辑了十几二十次帖子，除了这个之外已经几乎是完全体了。
<!DOCTYPE html><html lang="Zh-hans"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge,chorme"><title>批量赠送勋章</title><style>body{background-image:url("https://img.gamemale.com/album/202407/06/131951ej0cnjft8f8zdgdq.jpg")!important;background-size:cover;background-attachment:fixed;background-position:center;width:640px;margin:0 auto}#ct{background:rgba(232,228,225,0.3);transition:all 0.5s;border-radius:10px;margin:12px;padding:18px}#ct:hover{backdrop-filter:blur(6px);background:rgba(232,228,225,0.7)}.top_container{margin-bottom:16px}.top_container .subtitle{font-size:20px;font-weight:700;margin-top:0;margin-bottom:4px}input{height:30px;border-radius:6px;border:none}.container{display:flex;justify-content:space-between}.container .subtitle{font-size:20px;font-weight:700;margin-top:0;margin-bottom:8px}.gift-only{width:55%}.right_part{width:45%}.options{display:flex;align-items:center;margin-top:4px}img{border-radius:4px;height:34px;width:34px}input{transform:scale(1.6);margin:0 6px 0 8px}#functions{display:flex;flex-direction:column;align-items:center}button{background-color:#fff;font-size:24px;font-weight:700;border-radius:10px;padding:10px;border:none;margin:16px 0}#total_cost{display:flex;justify-content:center;margin-top:75px}p{margin-bottom:0}#color_picker{display:none}</style></head><body><div id="ct"><div class="top_container"><div class="uid_input"><p class="subtitle">对方的用户ID:</p><input type="text" id="zs_uid" value=""><br></div></div><div class="container"><div class="gift-only"><p class="subtitle">仅赠送</p><div class="options"><img src="https://img.gamemale.com/album/201905/13/141900suhhfqzptfzvlfak.gif"> <input type="checkbox" name="Checkbox[]" value="195" gold="01" magic="0" onchange="calculate()">[金币01] 没有梦想的咸鱼</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/113409q011xcf550bav1a5.gif"> <input type="checkbox" name="Checkbox[]" value="46" gold="22" magic="0" onchange="calculate()">[金币22] 灵光补脑剂</div><div class="options"><img src="https://img.gamemale.com/album/202209/08/220343vhng1hmssoyh577i.gif"> <input type="checkbox" name="Checkbox[]" value="456" gold="25" magic="0" onchange="calculate()">[金币25] 茉香啤酒</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/114500je50kb57xgkx28jx.gif"> <input type="checkbox" name="Checkbox[]" value="100" gold="0" magic="8" onchange="calculate()">[咒术08] 咆哮诅咒</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/113346zfvtihpznujw1nii.gif"> <input type="checkbox" name="Checkbox[]" value="20" gold="10" magic="0" onchange="calculate()">[金币10] 丢肥皂</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/113342to7t7zj24jot5s7t.gif"> <input type="checkbox" name="Checkbox[]" value="45" gold="12" magic="0" onchange="calculate()">[金币12] 千杯不醉</div><div class="options"><img src="https://img.gamemale.com/album/201903/31/141637dqowosrr6o66wszv.gif"> <input type="checkbox" name="Checkbox[]" value="174" gold="13" magic="0" onchange="calculate()">[金币13] 变骚喷雾</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/113350j47rr1f17qq4nafs.gif"> <input type="checkbox" name="Checkbox[]" value="19" gold="15" magic="0" onchange="calculate()">[金币15] 送情书</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/114543q711gvjj1gb7181b.gif"> <input type="checkbox" name="Checkbox[]" value="119" gold="0" magic="8" onchange="calculate()">[咒术08] 霍格沃茨五日游</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/113509p6ybf8wy2yf2z7zd.gif"> <input type="checkbox" name="Checkbox[]" value="150" gold="50" magic="0" onchange="calculate()">[金币50] 神秘商店贵宾卡</div><div class="options"><img src="https://img.gamemale.com/album/202209/08/220403i7qb9uk0w9w5180w.gif"> <input type="checkbox" name="Checkbox[]" value="455" gold="70" magic="0" onchange="calculate()">[金币70] 闪光糖果盒</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/113515vyfn72h7yw5ad3t7.gif"> <input type="checkbox" name="Checkbox[]" value="143" gold="40" magic="0" onchange="calculate()">[金币40] 萨赫的蛋糕</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/113358ltdxvdxwc2n1an25.gif"> <input type="checkbox" name="Checkbox[]" value="104" gold="180" magic="0" onchange="calculate()">[金币180] 遗忘之水</div></div><div class="right_part"><div class="self-purchase"><p class="subtitle">可自购</p><div class="options"><img src="https://img.gamemale.com/album/201507/02/114530cthryt8yatcaass1.gif"> <input type="checkbox" name="Checkbox[]" value="14" gold="0" magic="4" onchange="calculate()">[咒术04] 炼金之心</div><div class="options"><img src="https://img.gamemale.com/album/201904/25/215910qzr53805k8vr8cee.gif"> <input type="checkbox" name="Checkbox[]" value="186" gold="0" magic="4" onchange="calculate()">[咒术04] 石肤术</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/114440h1op1p51o3woiip6.gif"> <input type="checkbox" name="Checkbox[]" value="44" gold="0" magic="8" onchange="calculate()">[咒术08] 召唤古代战士</div><div class="options"><img src="https://img.gamemale.com/album/201507/02/114427z0y3lkpzgk46gnp5.gif"> <input type="checkbox" name="Checkbox[]" value="43" gold="0" magic="3" onchange="calculate()">[咒术03] 水泡术</div><div class="options"><img src="https://img.gamemale.com/album/202209/08/233428tmennhulj3nj3e6x.gif"> <input type="checkbox" name="Checkbox[]" value="458" gold="0" magic="15" onchange="calculate()">[咒术15] 思绪骤聚</div><div class="options"><img src="https://img.gamemale.com/album/202310/11/195901i4sbsnnn40qnsc4s.gif"> <input type="checkbox" name="Checkbox[]" value="457" gold="0" magic="7" onchange="calculate()">[咒术07] 雷霆晶球</div><div class="options"><img src="https://img.gamemale.com/album/202312/20/210416cnqgzpupdqqqpsq6.gif"> <input type="checkbox" name="Checkbox[]" value="600" gold="0" magic="8" onchange="calculate()">[咒术08] 杀意人偶</div></div><div id="functions"><div id="total_cost"></div><button type="button" onclick="send()">点击赠送</button></div></div></div><p>请注意：<br>在点击赠送后，如果只出现了你勾选的第一个勋章，说明其他窗口可能被你的浏览器拦截了，返回这个页面，在浏览器地址栏的右边，取消对弹出窗口的拦截哦~</p></div><script type="text/javascript">function calculate() {
var str = document.getElementsByName("Checkbox[]");
var objarray = str.length;
var totalGold = 0;
var totalMagic = 0;
for (var z = 0; z < objarray; z++) {
if (str.checked == true) {
totalGold += parseInt(str.getAttribute("gold"));
totalMagic += parseInt(str.getAttribute("magic"));
}
}
document.getElementById("total_cost").innerHTML = "总消耗：金币 = " + totalGold + " 咒术 = " + totalMagic;
}
function send() {
var url = "https://www.gamemale.com/plugin.php?id=wodexunzhang:showxunzhang&action=zengsongAction&medalid=";
var uid = document.getElementById("zs_uid").value;
var str = document.getElementsByName("Checkbox[]");
var objarray = str.length;
var sum;
for (var z = 0; z < objarray; z++) {
if (str.checked == true) {
sum = url + str.value + "&zs_uid=" + uid + "&checkUID=" + uid;
window.open(sum);
}
}
}
calculate();</script></body></html>
这个html还写了句#color_picker{display:none}把AdGuard揉进来的那个调色盘bug给顺手修了。
效果图
碎碎念
因为页面结构变得复杂，所以原来的html网页结构已经不够用了，几乎是整个儿重构了一遍。写完之后，感觉未来很长一段时间都不会想碰前端了。
拿着0.1的期望，最近56帖只爆了1魂未免太脸黑了吧，再不生我要玉玉了！写了半天的CODE帖速速给本宫诞下双生胎口牙！
沃趣，真生啊，虽然不是双生胎但已经挺满意了，爽到口牙！
求赞环节
如果觉得内容还不错，拜托拜托，请点个免费的追随吧♪(´▽｀)/ 感谢！
https://img.gamemale.com/album/202405/31/001344ngqe3xzhqghtgm3f.jpg
星象占卜 很强大惹，可以自己选择批量赠送哪些的话要方便很多呢，而且看起来很美观{:6_169:} 这个版本做的很美观惹，以后可以使用这个版本赠送了{:6_169:} 原来是放在网页打开，一直以为是在猴油 取消了默认勾选方便了很多啊，我到现在还是一个灵魂都没触发过（虽然我发的帖子也不多） 楼主该功能已经有人发过了批量赠送 之前的版本用了很久，终于有新版了，ui界面大升级更美观了;P 祈祷术一直都是不可赠送的，凯登大大那边应该是做完工具就没有再改动了。 吸入咯{:5_118:}赞美星星{:5_118:}现在一键败家更容易噜 效果看着更加美观和直接了 咒术换成负重就是这次活动的商店了。
活动限制太多，uu杂货铺痛失开业机会 太厉害了， 泥潭大佬多如牛毛
技术也是日新月异{:4_91:} 不错，包养别人就更方便了，之前还会没取消勾选给到糖果盒{:4_100:} 有批量，一次性解决坛友难题，释放双手{:6_200:} 好强的亚子 收藏了喂 {:6_184:} 技术力太强了，感谢大佬的造福:loveliness: 这个赠送界面太好看了 已收藏:loveliness: 谢谢大佬的辛苦劳动造福广大坛友 看着更加的美观了~也方便了没有空间一键的快捷赠送了~{:6_169:} 感谢楼主！！！升级版比之前更方便了，画面也美观简洁！