测试功能
这里是投票标题
默认样式测试（可选）这里是投票副标题
同意
用户选择同意
反对
用户选择(－)反对
重复测试
重复测试
`
)
: [];
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';
}`)
