注释
let timerInterval, currentCounter, lastUpdateTime, color, translationStrings, emsCount;
const elements = {
container: document.getElementById('container'),
color: document.querySelector('.color'),
dyingHeader: document.querySelector(".dying-header"),
emergencyText: document.querySelector(".emergency"),
body: document.body,
timer: document.querySelector('.timer'),
timerHeader: document.querySelector(".timer-header"),
timerSubheader: document.querySelector(".timer-subheader"),
minuteTens: document.getElementById('minute-tens'),
minuteOnes: document.getElementById('minute-ones'),
secondTens: document.getElementById('second-tens'),
secondOnes: document.getElementById('second-ones'),
timerBoxes: document.querySelectorAll('.timer-box'),
timerSeparator: document.querySelector(".timer-separator"),
timerContainer: document.querySelector('.timer-container'),
ems: document.querySelector('.ems'),
online: document.querySelector('.online'),
emsCounter: document.querySelector('.ems-counter')
};
const adjustEMS = (emsOnline, color, showCount) => {
if (!showCount) {
elements.ems.style.display = "none";
elements.online.style.display = "none";
return;
}
if (emsOnline < 1) {
elements.ems.style.color = "rgba(195, 7, 63, 1)";
elements.online.style.display = "none";
elements.ems.innerHTML = translationStrings.ems_offline;
elements.emsCounter.style.bottom = "40px";
} else {
elements.ems.style.color = color;
elements.ems.innerHTML = translationStrings.ems_online;
elements.online.innerHTML = translationStrings.currently_online + emsOnline;
elements.online.style.display = "block";
}
elements.ems.style.display = "block";
};
const updateTimerDisplay = (timeLeft) => {
const minutes = Math.floor(timeLeft / 60).toString().padStart(2, '0');
const seconds = (timeLeft % 60).toString().padStart(2, '0');
elements.timer.innerHTML = `${minutes}:${seconds}`;
if (timeLeft <= 0) elements.timer.innerHTML = "00:00";
};
const setColorCSSRule = (color) => {
const styleSheet = document.styleSheets[1];
const cssRule = `.color { color: ${color}; }`;
styleSheet.insertRule ? styleSheet.insertRule(cssRule, styleSheet.cssRules.length) : styleSheet.addRule('.color', `color: ${color};`);
};
const displayScreenOne = (data, color) => {
Object.assign(elements.body.style, { backgroundImage: 'none', backgroundColor: 'rgba(0, 0, 0, 0.329)' });
Object.assign(elements.emsCounter.style, {
fontWeight: "bold",
display: "block",
top: "10px",
left: "50%",
transform: "translateX(-50%)",
textAlign: "center"
});
adjustEMS(data.emsOnline, color, data.showCount);
if (data.dispatched) elements.emergencyText.innerHTML = translationStrings.ems_on_the_way;
if (data.canRespawn) {
elements.dyingHeader.innerHTML = translationStrings.player_passed;
elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn;
}
Object.assign(elements.timer.style, {
fontWeight: "bold",
fontSize: "2rem",
padding: "1%",
display: "block",
color: color !== "red" ? color : ''
});
elements.container.style.display = 'flex';
updateTimerDisplay(data.counter);
};
const displayScreenTwo = (data, color) => {
Object.assign(elements.emsCounter.style, {
display: "block",
top: "10px",
left: "50%",
transform: "translateX(-50%)",
textAlign: "center"
});
adjustEMS(data.emsOnline, color, data.showCount);
Object.assign(elements.timer.style, {
fontWeight: "bold",
fontSize: "2rem",
padding: "1%",
display: "flex",
color: color !== "red" ? color : ''
});
if (data.dispatched) elements.emergencyText.innerHTML = translationStrings.ems_on_the_way;
if (data.canRespawn) {
elements.dyingHeader.innerHTML = translationStrings.player_passed;
elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn;
}
Object.assign(elements.dyingHeader.style, { fontSize: "1.2rem" });
elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.329)';
elements.container.style.display = 'flex';
updateTimerDisplay(data.counter);
};
const colorNameToHex = (color) => {
const colors = {
"aliceblue": "#f0f8ff",
"antiquewhite": "#faebd7",
"aqua": "#00ffff",
"aquamarine": "#7fffd4",
"azure": "#f0ffff",
"beige": "#f5f5dc",
"bisque": "#ffe4c4",
"black": "#000000",
"blanchedalmond": "#ffebcd",
"blue": "#0000ff",
"blueviolet": "#8a2be2",
"brown": "#a52a2a",
"burlywood": "#deb887",
"cadetblue": "#5f9ea0",
"chartreuse": "#7fff00",
"chocolate": "#d2691e",
"coral": "#ff7f50",
"cornflowerblue": "#6495ed",
"cornsilk": "#fff8dc",
"crimson": "#dc143c",
"cyan": "#00ffff",
"darkblue": "#00008b",
"darkcyan": "#008b8b",
"darkgoldenrod": "#b8860b",
"darkgray": "#a9a9a9",
"darkgreen": "#006400",
"darkkhaki": "#bdb76b",
"darkmagenta": "#8b008b",
"darkolivegreen": "#556b2f",
"darkorange": "#ff8c00",
"darkorchid": "#9932cc",
"darkred": "#8b0000",
"darksalmon": "#e9967a",
"darkseagreen": "#8fbc8f",
"darkslateblue": "#483d8b",
"darkslategray": "#2f4f4f",
"darkturquoise": "#00ced1",
"darkviolet": "#9400d3",
"deeppink": "#ff1493",
"deepskyblue": "#00bfff",
"dimgray": "#696969",
"dodgerblue": "#1e90ff",
"firebrick": "#b22222",
"floralwhite": "#fffaf0",
"forestgreen": "#228b22",
"fuchsia": "#ff00ff",
"gainsboro": "#dcdcdc",
"ghostwhite": "#f8f8ff",
"gold": "#ffd700",
"goldenrod": "#daa520",
"gray": "#808080",
"green": "#008000",
"greenyellow": "#adff2f",
"honeydew": "#f0fff0",
"hotpink": "#ff69b4",
"indianred": "#cd5c5c",
"indigo": "#4b0082",
"ivory": "#fffff0",
"khaki": "#f0e68c",
"lavender": "#e6e6fa",
"lavenderblush": "#fff0f5",
"lawngreen": "#7cfc00",
"lemonchiffon": "#fffacd",
"lightblue": "#add8e6",
"lightcoral": "#f08080",
"lightcyan": "#e0ffff",
"lightgoldenrodyellow": "#fafad2",
"lightgray": "#d3d3d3",
"lightgreen": "#90ee90",
"lightpink": "#ffb6c1",
"lightsalmon": "#ffa07a",
"lightseagreen": "#20b2aa",
"lightskyblue": "#87cefa",
"lightslategray": "#778899",
"lightsteelblue": "#b0c4de",
"lightyellow": "#ffffe0",
"lime": "#00ff00",
"limegreen": "#32cd32",
"linen": "#faf0e6",
"magenta": "#ff00ff",
"maroon": "#800000",
"mediumaquamarine": "#66cdaa",
"mediumblue": "#0000cd",
"mediumorchid": "#ba55d3",
"mediumpurple": "#9370db",
"mediumseagreen": "#3cb371",
"mediumslateblue": "#7b68ee",
"mediumspringgreen": "#00fa9a",
"mediumturquoise": "#48d1cc",
"mediumvioletred": "#c71585",
"midnightblue": "#191970",
"mintcream": "#f5fffa",
"mistyrose": "#ffe4e1",
"moccasin": "#ffe4b5",
"navajowhite": "#ffdead",
"navy": "#000080",
"oldlace": "#fdf5e6",
"olive": "#808000",
"olivedrab": "#6b8e23",
"orange": "#ffa500",
"orangered": "#ff4500",
"orchid": "#da70d6",
"palegoldenrod": "#eee8aa",
"palegreen": "#98fb98",
"paleturquoise": "#afeeee",
"palevioletred": "#db7093",
"papayawhip": "#ffefd5",
"peachpuff": "#ffdab9",
"peru": "#cd853f",
"pink": "#ffc0cb",
"plum": "#dda0dd",
"powderblue": "#b0e0e6",
"purple": "#800080",
"rebeccapurple": "#663399",
"red": "#ff0000",
"rosybrown": "#bc8f8f",
"royalblue": "#4169e1",
"saddlebrown": "#8b4513",
"salmon": "#fa8072",
"sandybrown": "#f4a460",
"seagreen": "#2e8b57",
"seashell": "#fff5ee",
"sienna": "#a0522d",
"silver": "#c0c0c0",
"skyblue": "#87ceeb",
"slateblue": "#6a5acd",
"slategray": "#708090",
"snow": "#fffafa",
"springgreen": "#00ff7f",
"steelblue": "#4682b4",
"tan": "#d2b48c",
"teal": "#008080",
"thistle": "#d8bfd8",
"tomato": "#ff6347",
"turquoise": "#40e0d0",
"violet": "#ee82ee",
"wheat": "#f5deb3",
"white": "#ffffff",
"whitesmoke": "#f5f5f5",
"yellow": "#ffff00",
"yellowgreen": "#9acd32"
};
return colors[color.toLowerCase()] || color;
};
以下是代码的注释及其中文翻译：
let timerInterval, currentCounter, lastUpdateTime, color, translationStrings, emsCount;
// 获取DOM元素
const elements = {
container: document.getElementById('container'), // 主容器
color: document.querySelector('.color'), // 颜色元素
dyingHeader: document.querySelector(".dying-header"), // 濒死标题
emergencyText: document.querySelector(".emergency"), // 紧急文本
body: document.body, // 文档主体
timer: document.querySelector('.timer'), // 定时器元素
timerHeader: document.querySelector(".timer-header"), // 定时器标题
timerSubheader: document.querySelector(".timer-subheader"), // 定时器副标题
minuteTens: document.getElementById('minute-tens'), // 分钟十位
minuteOnes: document.getElementById('minute-ones'), // 分钟个位
secondTens: document.getElementById('second-tens'), // 秒钟十位
secondOnes: document.getElementById('second-ones'), // 秒钟个位
timerBoxes: document.querySelectorAll('.timer-box'), // 定时器框
timerSeparator: document.querySelector(".timer-separator"), // 定时器分隔符
timerContainer: document.querySelector('.timer-container'), // 定时器容器
ems: document.querySelector('.ems'), // EMS (紧急医疗服务) 元素
online: document.querySelector('.online'), // 在线元素
emsCounter: document.querySelector('.ems-counter') // EMS计数器
};
// 调整EMS状态的函数
const adjustEMS = (emsOnline, color, showCount) => {
if (!showCount) { // 如果不显示计数
elements.ems.style.display = "none"; // 隐藏EMS元素
elements.online.style.display = "none"; // 隐藏在线元素
return;
}
if (emsOnline < 1) { // 如果没有在线EMS
elements.ems.style.color = "rgba(195, 7, 63, 1)"; // 设置颜色为红色
elements.online.style.display = "none"; // 隐藏在线元素
elements.ems.innerHTML = translationStrings.ems_offline; // 显示离线文本
elements.emsCounter.style.bottom = "40px"; // 调整EMS计数器位置
} else { // 如果有在线EMS
elements.ems.style.color = color; // 设置相应颜色
elements.ems.innerHTML = translationStrings.ems_online; // 显示在线文本
elements.online.innerHTML = translationStrings.currently_online + emsOnline; // 显示当前在线数量
elements.online.style.display = "block"; // 显示在线元素
}
elements.ems.style.display = "block"; // 显示EMS元素
};
// 更新定时器显示的函数
const updateTimerDisplay = (timeLeft) => {
const minutes = Math.floor(timeLeft / 60).toString().padStart(2, '0'); // 计算分钟并格式化
const seconds = (timeLeft % 60).toString().padStart(2, '0'); // 计算秒钟并格式化
elements.timer.innerHTML = `${minutes}:${seconds}`; // 更新定时器显示
// 如果时间还剩余
if (timeLeft) {
const styleSheet = document.styleSheets;
const cssRule = `.color { color: ${color}; }`; // 设置颜色样式
styleSheet.insertRule ? styleSheet.insertRule(cssRule, styleSheet.cssRules.length) : styleSheet.addRule('.color', `color: ${color};`);
}
};
// 显示第一个界面的函数
const displayScreenOne = (data, color) => {
Object.assign(elements.body.style, { backgroundImage: 'none', backgroundColor: 'rgba(0, 0, 0, 0.329)' }); // 设置背景样式
Object.assign(elements.emsCounter.style, {
fontWeight: "bold",
display: "block",
top: "10px",
left: "50%",
transform: "translateX(-50%)",
textAlign: "center"
});
adjustEMS(data.emsOnline, color, data.showCount); // 调整EMS状态
if (data.dispatched) elements.emergencyText.innerHTML = translationStrings.ems_on_the_way; // 显示EMS正在路上的信息
if (data.canRespawn) { // 如果可以复活
elements.dyingHeader.innerHTML = translationStrings.player_passed; // 显示玩家已去世文本
elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn; // 显示复活倒计时文本
}
Object.assign(elements.timer.style, {
fontWeight: "bold",
fontSize: "2rem",
padding: "1%",
display: "block",
color: color !== "red" ? color : ''
});
elements.container.style.display = 'flex'; // 显示容器
updateTimerDisplay(data.counter); // 更新定时器显示
};
// 显示第二个界面的函数
const displayScreenTwo = (data, color) => {
Object.assign(elements.emsCounter.style, {
display: "block",
top: "10px",
left: "50%",
transform: "translateX(-50%)",
textAlign: "center"
});
adjustEMS(data.emsOnline, color, data.showCount); // 调整EMS状态
Object.assign(elements.timer.style, {
fontWeight: "bold",
fontSize: "2rem",
padding: "1%",
display: "flex",
color: color !== "red" ? color : ''
});
if (data.dispatched) elements.emergencyText.innerHTML = translationStrings.ems_on_the_way; // 显示EMS正在路上的信息
if (data.canRespawn) { // 如果可以复活
elements.dyingHeader.innerHTML = translationStrings.player_passed; // 显示玩家已去世文本
elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn; // 显示复活倒计时文本
}
Object.assign(elements.dyingHeader.style, { fontSize: "1.2rem" }); // 设置死亡标题字体大小
elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.329)'; // 设置背景颜色
elements.container.style.display = 'flex'; // 显示容器
updateTimerDisplay(data.counter); // 更新定时器显示
};
// 将颜色名称转换为十六进制值的函数
const colorNameToHex = (color) => {
const colors = {
// ... (省略的颜色映射)
};
return colors || color; // 返回对应的十六进制值或原始颜色
};
### 注释总结：
- 此代码主要用于处理一个网页的紧急医疗服务（EMS）界面，包含显示EMS状态、倒计时、以及界面的不同显示。
- 每个函数和逻辑块都有详细的注释，指明其功能和用途，便于理解。
页:
[1]