用户:Salt lovely/沙盒：修订间差异

2024年3月23日 (六) 19:40的最新版本

测试功能

这里是投票标题

默认样式测试（可选）这里是投票副标题

同意
U:Salt Salt Lovely
反对
Salt111
弃权
User:Example Salt111 U:Salt_lovely
重复测试
U:Example U:Example U:Example
无投票1
无投票2

同意
用户选择同意
反对
用户选择(－)反对
重复测试
重复测试

` ) : []; return { barHTML: divList.join("") }; }; /** 主流程 */ /** @type {(el: HTMLDivElement) => void} */ const process = (el) => { el.classList.remove("not-init"); const barEl = el.querySelector(".salt-vote-bar"); const colorEl = el.querySelector(".salt-vote-color"); const list = el.querySelector(".salt-vote-options"); const lists = list && list.querySelectorAll("li"); const descUl = el.querySelector(".salt-vote-describe"); const descLi = descUl && descUl.querySelectorAll("li"); /** 收集的投票信息 @type {{name: string, set: string[], li: HTMLElement, count: HTMLElement, desc?: HTMLElement}[]} */ const collect = []; /** 收集的投票信息 @type {{name: string, desc: HTMLElement}[]} */ const descCollect = []; /** 有问题的投票信息 @type {Record>} */ const wrongCollect = {}; /** @type {string[]} */ const color = []; // 必须要有投票区域 if (!list || !lists || !lists.length) return; // 获取颜色 if (!colorEl) color.push(...defaultColor); else { const colorPar = (colorEl.textContent || "") .replace(/\s*[,;，；、*]+\s*/g, "***") .trim() .split("***") .filter(Boolean); if (colorPar.length) color.push(...colorPar); else color.push(...defaultColor); } // 获取投票选项描述 const descList = Array.from(descLi || []); descList.forEach((desc) => { const option = desc.querySelector(".salt-vote-desc-option"); const value = desc.querySelector(".salt-vote-desc"); if (!option || !value) return; const title = option.textContent || ""; const thisCollect = { name: title, desc: value }; descCollect.push(thisCollect); desc.style.setProperty("--height", "0"); }); // 获取投票信息 const liList = Array.from(lists); liList.forEach((li, liIndex) => { const option = li.querySelector(".salt-vote-option"); const voter = li.querySelector(".salt-vote-voter"); if (!option || !voter) return; const title = option.textContent || ""; const voters = Array.from(voter.querySelectorAll("a")); const count = document.createElement("div"); const thisCollect = { name: title, set: [], li: li, count }; voters.forEach((v) => { const res = v.title .replace(/^(?:User|U|用户):/i, "") .replace(/\s/g, "_"); if (thisCollect.set.includes(res)) { v.remove(); return; } thisCollect.set.push(res); // 允许自定义用户名样式 if ( !v.textContent || v.textContent.toUpperCase().trim().replace(/\s/g, "_") !== res.toUpperCase() ) v.textContent = res; }); collect.push(thisCollect); // 外观 li.appendChild(count); count.className = "salt-vote-option-count"; li.style.setProperty("--vote-color", at(color, liIndex)); // 配色 li.style.setProperty("--vote-count", `${thisCollect.set.length}`); // 点击展开选项描述 const desc = descCollect.find(({ name }) => name === title); if (desc) { const descEl = desc.desc; thisCollect.desc = descEl; li.classList.add("has-desc"); descEl.classList.add("salt-vote-option-hooked"); descEl.style.setProperty("--height", `${descEl.scrollHeight}px`); descEl.style.setProperty("--vote-color", at(color, liIndex)); li.addEventListener("click", () => { if (descEl.classList.contains("show")) { descEl.classList.remove("show"); } else { descEl.classList.add("show"); descEl.style.setProperty("--height", `${descEl.scrollHeight}px`); } }); li.appendChild(descEl); } }); // 绘制图形 const { barHTML } = renderPercent(collect, color, !!barEl); if (barEl) barEl.innerHTML = barHTML; }; const main = () => getAllNotInitContainer().forEach((el) => process(el)); setTimeout(() => { main(); }, 0); setTimeout(() => { main(); }, 66); setInterval(() => { main(); }, 500); })(window);

#00F5D4,#00BBF9,#FEE440,#F15BB5,#9B5DE5

压力测试

颜色参数有横条

1
我们可以看到啊，选这个的用户很多
123
456
1234567890

JS代码存档

// MCBBS头像上传时三个大小头像切片上传代码 - 修改 - 启用抗锯齿
// 其实就加了两行
(0, eval)(`function saveAvatar() {
    var img = $('avatarimage');
    var sd = getSelectorDimention();
    var ad = getAvatarDimension();
    var rl = (sd.left-ad.left)/ad.width;
    var rt = (sd.top-ad.top)/ad.height;
    var rw = sd.width/ad.width;
    var rh = sd.height/ad.height;
    var iw = jQuery('#avatarimage').width();
    var ih = jQuery('#avatarimage').height();
    var sl = rl*iw;
    var st = rt*ih;
    var sw = rw*iw;
    var sh = rh*ih;
    var tw = sw;
    var th = sh;
    if (sw>200 || sh>250) {
        var r = Math.max(sw/200, sh/250);
        tw = Math.floor(sw/r);
        th = Math.floor(sh/r);
    }          
    var canvas = document.createElement('canvas');
    canvas.width = tw;
    canvas.height = th;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, tw, th);
    ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
    ctx.imageSmoothingEnabled = true;   // 启用抗锯齿
    ctx.imageSmoothingQuality = "high"; // 高品质抗锯齿
    var dataURL = canvas.toDataURL("image/jpeg");
    jQuery('#avatar1').val(dataURL.substr(dataURL.indexOf(",") + 1));
    var tw = sw;
    var th = sh;
    if (sw>120 || sh>120) {
        var r = Math.max(sw/120, sh/120);
        tw = Math.floor(sw/r);
        th = Math.floor(sh/r);
    }     
    var canvas = document.createElement('canvas');
    canvas.width = tw;
    canvas.height = th;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, tw, th);
    ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
    var dataURL = canvas.toDataURL("image/jpeg");
    jQuery('#avatar2').val(dataURL.substr(dataURL.indexOf(",") + 1));
    var mwh = Math.min(sw, sh);
    if (sw>mwh) {
        sl += Math.floor((sw-mwh)/2);
        sw = mwh;
    }
    if (sh>mwh) {
        st += Math.floor((sh-mwh)/2);
        sh = mwh;
    }
    var tw = 48;
    var th = 48;
    var canvas = document.createElement('canvas');
    canvas.width = tw;
    canvas.height = th;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, tw, th);
    ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
    var dataURL = canvas.toDataURL("image/jpeg");
    jQuery('#avatar3').val(dataURL.substr(dataURL.indexOf(",") + 1));
    var src = $('avatarform').action;
    $('avatarform').action = data[data.indexOf('src')+1].replace('images/camera.swf?inajax=1', 'index.php?m=user&a=rectavatar&base64=yes');
    $('avatarform').target='rectframe'; 
}`)

@@ 第1行： / 第1行： @@
-== 尚未实装，所以除了我以外的人都看不见2333 ==
+== 测试功能 ==
-<span class="animated" style="height:1em;width:1em;display:inline-block;"><span class="animated-item">1</span><span class="animated-item">2</span><span class="animated-item">3</span></span>
-cccc[[用户:Salt_lovely|<span style="--btnw:257px;--btnh:62px;--backcolor:#574266;--fontcolor:#fff;--fontsize:2em;" class="border-btn center-txt">test</span>]]
+* [[/抓取MCBBS用户头像]]
-bbbb
+* [[/签名]]
-[https://mcbbs-wiki.cn/wiki/首页 <span style="--btnw:257px;--btnh:62px;--backcolor:#fffbf0;--fontcolor:#3b2e7e;--fontsize:2em;" class="border-btn center-txt box-sdw">test</span>]aaaa
+* [[/皮肤测试]]
+* [[/导航盒]]
+* [[/投票箱]]
-<hr>
+{{U:Salt lovely/沙盒/投票箱
+|title=这里是投票标题
+|subtitle=默认样式测试（可选）这里是投票副标题
+|#同意=
+[[U:Salt]]<!-- 多行测试 -->
+[[用户:Salt_lovely|{{color|#d3a|Salt Lovely}}]]<!-- 自定义用户名样式测试 -->
+|*同意=用户选择同意
-<span class="gard-txt-webkit" style="--gardcolor:#549688,#065279,#8c4356,#56004f;--garddeg:60deg">·这·是·一·个·渐·变·色·测·试·，'''·为·了·保·证·测·试·效·果·'''，''·文·字·应·该·尽·可·能·地·长·''——使用了-webkit-，颜色可以无限多，兼容性不佳</span>
+|#反对=[[U:Salt|{{color|#3da|Salt111}}]]
-* '''坐等CSS新版本，支持 ''background-clip: text;'' 的时候吧'''
+|*反对=用户选择{{反对}}
-<span class="gard-txt" style="--gardcolor1:#549688;--gardcolor2:#56004f;--garddeg:60deg">·这·是·一·个·渐·变·色·测·试·，·为·了·保·证·测·试·效·果·，·文·字·应·该·尽·可·能·地·长·——未使用-webkit-，只能用两种颜色，浏览器兼容</span>
+|#弃权=[[User:Example]][[U:Salt|{{color|#3da|Salt111}}]][[U:Salt_lovely]]
-* '''开发失败'''
-=== 测试功能 ===
+|#重复测试=[[U:Example]][[U:Example]][[U:Example]]
-[[/抓取MCBBS用户头像]]
+|*重复测试=重复测试
-== 新签名 ==
+|#无投票1=
-—— [[用户:Salt_lovely|{{font|font=Times New Roman|color=#013|size=large|''Salt lovely''}}]]<small>「[[用户讨论:Salt_lovely|{{font|color=#367|敢竭鄙怀}}]]，[[特殊:用户贡献/Salt_lovely|{{font|color=#466|恭疏短引}}]]」</small>
-== 样式测试 ==
+|#无投票2=
-<div class="article-container">
+}}
-离骚 【周】屈原
-帝高阳之苗裔兮，朕皇考曰伯庸。
+{{U:Salt lovely/沙盒/投票箱
+|标题=压力测试
-摄提贞于孟陬兮，惟庚寅吾以降。
+|副标题=颜色参数 有横条
+|bar=1
-皇览揆余初度兮，肇锡余以嘉名：
+|颜色=#00F5D4,#00BBF9,#FEE440,#F15BB5,#9B5DE5
+|#1=[[用户:Salt_lovely]][[用户:Salt_lovely]][[用户:Salt_lovely]][[用户:Salt_lovely]]
-名余曰正则兮，字余曰灵均。
+|*1=我们可以看到啊，选这个的用户很多
+|#2=
-纷吾既有此内美兮，又重之以修能。
+|#3=[[User:Salt]][[User:Example]][[U:Example]][[用户:Example]]
+|#4=
-扈江离与辟芷兮，纫秋兰以为佩。
+|#5=
+|#6=
-汩余若将不及兮，恐年岁之不吾与。
+|#7=[[User:Salt]][[User:Example]][[User:Salt]][[User:Example]][[User:Salt]][[User:Example]]
+|#8=
-朝搴阰之木兰兮，夕揽洲之宿莽。
+|#9=
+|#10=
-日月忽其不淹兮，春与秋其代序。
+|#11=
+|#12=
-....
+|#13=[[User:Salt]]
-</div>
+|#14=[[用户:Salt_lovely]][[用户:Salt_lovely]][[User:Salt]][[User:Example]][[U:Example]][[用户:Example]][[用户:Salt_lovely]][[用户:Salt_lovely]]
-<!--恶地
+|#15=
-恶地高原
+|#16=
-繁茂的恶地高原
+|#17=
-竹林
+|*123=
-竹林丘陵
+|*456=1234567890
-丛林
+}}
-丛林边缘
-丛林丘陵
-桦木森林
-桦木森林丘陵
-针叶林
-针叶林丘陵
-巨型针叶林
-巨型针叶林丘陵
-积雪的针叶林
-积雪的针叶林丘陵
-森林
-繁茂的丘陵
-繁茂的山地
-热带草原
-热带高原
-黑森林
-草原
-积雪的冻原
-沙漠
-沙漠丘陵
-沙滩
-积雪的沙滩
-石岸
-沼泽
-山地
-雪山
-冷水海洋
-冷水深海
-封冻深海
-温水深海
-温水海洋
-暖水海洋
-河流
-冻河
-蘑菇岛海岸
-蘑菇岛-->
-== 样式存档 ==
-<pre>/* #bodyContent{
-    margin-left: auto !important;margin-right: auto !important;
-} */
-/* #content:before{
-    content:'';
-    left:0;
-    height:var(--bgtop);
-    width:calc(100% - 90px);
-    padding:0 45px;
-    margin-top:-45px;
-    display:block;
-    position:absolute;
-    background:
-         url(https://s2.ax1x.com/2019/11/28/QFB2X4.png)left top no-repeat,
-        url(https://s2.ax1x.com/2019/11/28/QFBfB9.png)right top no-repeat,
-        url(https://wiki.crash-logs.cn/images/2/21/body_top.png)top repeat-x;
-} */
-/* #content:after{
-    content:'';
-    left:0;
-    height:var(--bgtop);
-    width:calc(100% - 90px);
-    padding:0 45px;
-    bottom:0px;
-    margin-bottom:-45px;
-    display:block;
-    position:absolute;
-    background:
-        url(https://wiki.crash-logs.cn/images/7/7d/body_bottom.png)bottom repeat-xcontent-box,
-        url(https://s2.ax1x.com/2019/11/28/QFcINd.png)left bottom no-repeat,
-        url(https://s2.ax1x.com/2019/11/28/QFc5AH.png)right bottom no-repeat;
-} */</pre>
-== 新章节: 测试 ==
-''测试：添加新章节''
 == JS代码存档 ==