GameMale
登陆 / 注册 搜索

USERCENTER

SEARCHSITE

搜索

查看: 1813|回复: 49
收起左侧

[功能优化] 【勋章工具】批量赠送可多选 升级版 ★

    [复制链接] |关注本帖

SCP-s-1889-第二页缘起星空虚空之海的鲸裸体克里斯圣甲虫秘典『随时随地开启!』被释放的灵魂『随时随地开启!』无尽的怀表男巫之歌

     楼主| 星之子 发表于 2024-8-15 06:16:29 | 显示全部楼层 |阅读模式 |取消关注该作者的回复
    本帖最后由 星之子 于 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[type=text]{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[type=checkbox]{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] [1日] 没有梦想的咸鱼</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] [3日] 灵光补脑剂</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] [3日] 茉香啤酒</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] [3日] 咆哮诅咒</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] [5日] 丢肥皂</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] [5日] 千杯不醉</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] [5日] 变骚喷雾</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] [5日] 送情书</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] [5日] 霍格沃茨五日游</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] [7日] 神秘商店贵宾卡</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] [7日] 闪光糖果盒</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] [14日] 萨赫的蛋糕</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] [30日] 遗忘之水</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] [3日] 炼金之心</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] [3日] 石肤术</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] [4日] 召唤古代战士</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] [5日] 水泡术</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] [5日] 思绪骤聚</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] [7日] 雷霆晶球</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] [7日] 杀意人偶</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[z].checked == true) {
                        totalGold += parseInt(str[z].getAttribute("gold"));
                        totalMagic += parseInt(str[z].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[z].checked == true) {
                        sum = url + str[z].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帖速速给本宫诞下双生胎口牙!

    沃趣,真生啊,虽然不是双生胎但已经挺满意了,爽到口牙!

    求赞环节

    如果觉得内容还不错,拜托拜托,请点个免费的追随吧♪(´▽`)/ 感谢!


    来自群组: 星象占卜

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x

    评分

    参与人数 18血液 +33 追随 +18 堕落 +6 收起 理由
    zh89320 + 1
    是阿行嘞 + 1 + 1
    Freeze123 + 1
    紫漾Aro + 10 + 1 + 1 很给力!
    书の妖怪 + 3 + 1 很给力!
    singto + 1 很给力!
    52aro + 1
    咸鱼鱼 + 1
    莫索卡亚 + 1 + 1 很给力!
    DELINQUENCY + 1 给大犇orz

    查看全部评分

    已有1人关注本帖

    liuhuo0

    本帖被以下淘专辑推荐:

    回复

    使用道具 举报

    不曾寄出的信件『随时随地开启!』漂洋小船『随时随地开启!』冒险用指南针破损的旧书丛林的鸟飞走了雪王的心脏人鱼之泪幽灵竹筒

      回复

      使用道具 举报

      脉律辐石官复原职丹妮莉丝·坦格利安『逆境中的幸运女神』幸运女神的微笑我的冶金打火机羽毛笔劫掠核芯御医神兔虚空之海的鲸

        XLK 发表于 2024-8-15 07:26:49 | 显示全部楼层 |取消关注该作者的回复
        回复

        使用道具 举报

        『正在入住GM村』上古卷轴V:天际丹妮莉丝·坦格利安克苏鲁的仆从女神之泪劫掠核芯御医神兔雷夜嘯聲

          回复

          使用道具 举报

          缘起星空虚空之海的鲸

            取消了默认勾选方便了很多啊,我到现在还是一个灵魂都没触发过(虽然我发的帖子也不多)
            回复

            使用道具 举报

            火柴 - Gamemale萨菲罗斯炽天使之拥亚索诺克提斯·路西斯·伽拉姆官复原职璀璨之焰業火死鬥虚空之海的鲸

              回复

              使用道具 举报

              收到情书朴素的誓言无瑕的回忆業火死鬥永浴爱河泰比里厄斯虚空之海的鲸实现梦想净化污秽的天照阿怪

                回复

                使用道具 举报

                亚索月影狼晓月终焉旅行骰子!卡利亚权杖

                  回复

                  使用道具 举报

                  九尾妖狐·阿狸千杯不醉『正在入住GM村』千里潋滟风雪之家金牌矿工御医神兔双重身份

                    回复

                    使用道具 举报

                    百相千面-晦永远的克叔業火死鬥实现梦想官复原职虚空之海的鲸Zootopia幸运女神的微笑『逆境中的幸运女神』御医神兔

                      回复

                      使用道具 举报

                      无瑕的回忆镜中小鸟香蕉特饮40x43 隐形➀香喷喷的烤鸡月影狼

                        回复

                        使用道具 举报

                        诺克提斯·路西斯·伽拉姆普隆普特·阿金塔姆传说的黑道-桐生一马亚当‧简森幻象克里斯·埃文斯至死不渝杰森‧斯坦森月光骑士丹尼爾·紐曼

                          回复

                          使用道具 举报

                          阿怪『矩阵谜钥Ⓖ』『梦旅存根』『交钥匙了!』夏日柯基幸福的小阿尔GM吸血伯爵永远的克叔【夏日限定】夏日的泰凯斯

                            回复

                            使用道具 举报

                            【圣诞限定】心心念念小雪人『住在GM村』克里斯·埃文斯杰森‧斯坦森冰海钓竿男用贞操带月亮提灯伪造的红石海螺号角软泥怪

                              回复

                              使用道具 举报

                              辐射:新维加斯龙腾世纪:审判达拉然最终幻想XVI瑞雪兆丰年,生灵万物新五彩斑斓的蛋暮色卵

                                回复

                                使用道具 举报

                                GM論壇榮譽勛章远古石碑魔法石碑琉璃玉坠神圣十字章月影蛋暮色卵灵藤蛋

                                  回复

                                  使用道具 举报

                                  没有梦想的咸鱼20x43 隐形➀吃饱金币的Doge冒险用指南针金牌矿工小小安全帽小小舞台阿拉喵?神灯图腾饼干『梦旅存根』

                                    回复

                                    使用道具 举报

                                    人到中年『户口本: Lv7+』霍格沃兹特快列车雄躯的昇格索尔·奥丁森龙血指环岛田半藏亚索蔷薇骑士之刃落雪勇者与龙的传说-第四页

                                      回复

                                      使用道具 举报

                                      猩红魔鹫裸体克里斯黄金树的恩惠极·龙の意不朽之恋和你一起飞行的皮卡丘我的天使纯真护剑『梦旅存根』

                                        回复

                                        使用道具 举报

                                        实现梦想性感男神GM人到中年卡洛斯·奥利维拉史莱姆牧场霍格沃兹魔法学校Forever Titanic官复原职

                                          回复

                                          使用道具 举报

                                          您需要登录后才可以回帖 登录 | 立即注册

                                          本版积分规则

                                          文字版|手机版|小黑屋|GameMale

                                          GMT+8, 2024-12-22 10:21 , Processed in 0.205587 second(s), 145 queries , Redis On.

                                          Copyright © 2013-2024 GameMale

                                          All Rights Reserved.

                                          快速回复 返回列表