注释-GPT问答-FiveM技术教程分享 - Powered by Discuz! Archiver

赴爱发表于 2025-6-15 04:08:15

注释

ChatGPT 发表于 2025-6-15 04:09:59

下面是您提供的代码的注释和简体中文翻译：

// 应用渐变文本效果的函数
const applyGradientTextEffect = (element, color, screen) => {
// 如果颜色为红色且屏幕编号为3
if (color === "red" && screen === 3) {
   // 设置背景渐变和文本阴影效果
   element.style.background = 'linear-gradient(to right, rgba(195, 7, 63, 0.6), #f83d3dcb, #f83d3dcb, rgba(195, 7, 63, 0.6))';
   element.style.textShadow = '0 0 5px rgba(243, 33, 33, 0.199), 0 0 10px rgba(243, 33, 33, 0.199), ...'; //省略部分
   element.style.webkitTextFillColor = 'transparent'; // 文字填充透明
   element.style.webkitBackgroundClip = 'text'; // 背景裁剪为文本
   return; // 结束函数
}

// 如果颜色为蓝色且屏幕编号为3
if (color === "blue" && screen === 3) {
   // 设置背景渐变和文本阴影效果
   element.style.background = 'linear-gradient(to right, rgba(7, 63, 195, 0.6), #3d3df8cb, #3d3df8cb, rgba(7, 63, 195, 0.6))';
   element.style.textShadow = '0 0 5px rgba(33, 33, 243, 0.199), 0 0 10px rgba(33, 33, 243, 0.199), ...'; //省略部分
   element.style.webkitTextFillColor = 'transparent'; // 文字填充透明
   element.style.webkitBackgroundClip = 'text'; // 背景裁剪为文本
   return; // 结束函数
}

// 如果颜色不是以#开头，则转换为十六进制
if (!color.startsWith('#')) {
   color = colorNameToHex(color);
}

// 解析十六进制颜色为RGB
const hexColor = color.slice(1);
const r = parseInt(hexColor.substr(0, 2), 16); // 红色分量
const g = parseInt(hexColor.substr(2, 2), 16); // 绿色分量
const b = parseInt(hexColor.substr(4, 2), 16); // 蓝色分量

// 针对屏幕3设置样式
if (screen === 3) {
   // 计算更浅和更深的颜色
   const lighterColor = `rgba(${r}, ${g}, ${b}, 0.3)`;
   const darkerColor = `rgba(${Math.max(r - 30, 0)}, ${Math.max(g - 30, 0)}, ${Math.max(b - 30, 0)}, 1)`;
   element.style.background = `linear-gradient(to right, ${lighterColor}, ${darkerColor}, ${darkerColor}, ${lighterColor})`;
   element.style.textShadow = `0 0 5px rgba(${r}, ${g}, ${b}, 0.4), ...`; //省略部分
}
// 针对屏幕5设置样式
else if (screen === 5) {
   const darkerColor = `rgba(${Math.max(r - 30, 0)}, ${Math.max(g - 30, 0)}, ${Math.max(b - 30, 0)}, 1)`;
   element.style.background = `linear-gradient(to top, ${darkerColor} 0%, rgba(${r}, ${g}, ${b}, 0) 6%)`;
   element.style.webkitTextStroke = `1px rgba(${r}, ${g}, ${b}, 1.0)`; // 设置文本描边
   element.style.textShadow = `0 0 10px rgba(${r}, ${g}, ${b}, 0.2), ...`; //省略部分
}

// 设定文本填充透明及背景裁剪
element.style.webkitTextFillColor = 'transparent';
element.style.webkitBackgroundClip = 'text';
element.style.backgroundClip = 'text';
}

// 显示屏幕三的信息
const displayScreenThree = (data, color) => {
// 设置容器的样式
Object.assign(elements.container.style, { bottom: "5%", top: "20%" });
// 调整EMS计数器的样式
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.timerContainer.style, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   marginBottom: '20px'
});

applyGradientTextEffect(elements.dyingHeader, color, 3); // 应用渐变文本效果

elements.dyingHeader.style.fontSize = "1.4rem"; // 设置字体大小
elements.dyingHeader.style.fontWeight = "bolder"; // 设置字体加粗

// 设置计时框样式
elements.timerBoxes.forEach(element => {
   Object.assign(element.style, {
         backgroundColor: "#333",
         padding: "10px",
         borderRadius: "5px",
         margin: "0 5px",
         display: "flex"
   });
});

elements.timerSeparator.innerHTML = ":"; // 设置时间分隔符

// 设置计时器标题
elements.timerHeader.innerHTML = translationStrings.player_hurt_find_help_or_ems;
Object.assign(elements.timerHeader.style, {
   fontWeight: "normal",
   color: "rgb(185, 185, 185)",
   marginBottom: "1.2%",
   fontSize: ".8rem"
});

// 设置副标题
elements.timerSubheader.innerHTML = translationStrings.player_hurt_time_to_live;
Object.assign(elements.timerSubheader.style, {
   marginBottom: "2%",
   marginTop: "1%",
   fontWeight: "bold",
   fontSize: ".8rem"
});

elements.emergencyText.innerHTML = ""; // 清空紧急文本
elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.329)'; // 设置背景色

updateTimerDisplay(data.counter); // 更新计时器显示

// 计算分钟和秒数并更新显示
const minutes = Math.floor(data.counter / 60);
const seconds = data.counter % 60;
elements.minuteTens.innerHTML = Math.floor(minutes / 10);
elements.minuteOnes.innerHTML = minutes % 10;
elements.secondTens.innerHTML = Math.floor(seconds / 10);
elements.secondOnes.innerHTML = seconds % 10;

elements.container.style.display = 'flex'; // 显示容器
};

// 显示屏幕四的信息
const displayScreenFour = (data, color) => {
elements.online.innerHTML = translationStrings.currently_online + data.emsOnline; // 当前在线人数
Object.assign(elements.emsCounter.style, {
   display: "block",
   top: "10px",
   left: "50%",
   transform: "translateX(-50%)",
   textAlign: "center"
});

adjustEMS(data.emsOnline, color, data.showCount); // 调整EMS显示

elements.timer.style.padding = "1%"; // 设置计时器的填充
elements.timer.style.color = color !== "red" ? color : ''; // 设置计时器颜色

elements.dyingHeader.innerHTML = translationStrings.player_hurt_critical.toUpperCase(); // 设置死亡提示
elements.dyingHeader.classList.add("fading-text"); // 添加动画类
elements.dyingHeader.style.fontSize = ".9rem";
elements.dyingHeader.style.fontWeight = "500"; // 设置字体权重
elements.dyingHeader.style.backgroundColor = color !== "red" ? color : 'red'; // 设置背景颜色
elements.dyingHeader.style.padding = "5px"; // 设置填充

// 设置计时器标题样式
Object.assign(elements.timerHeader.style, {
   fontWeight: "normal",
   color: "rgb(185, 185, 185)",
   fontSize: ".8rem"
});
elements.timerHeader.innerHTML = translationStrings.player_hurt_find_help_or_ems; // 设置标题内容

// 设置副标题样式
Object.assign(elements.timerSubheader.style, {
   marginTop: "1%",
   fontWeight: "450",
   fontSize: ".8rem"
});
elements.timerSubheader.innerHTML = translationStrings.player_hurt_time_to_live; // 设置副标题内容

// 设置容器样式
Object.assign(elements.container.style, { bottom: "5%", top: "75%" });
elements.emergencyText.innerHTML = ""; // 清空紧急文本

elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.329)'; // 设置背景色
updateTimerDisplay(data.counter); // 更新计时器显示
elements.timer.style.display = "flex"; // 显示计时器
elements.container.style.display = 'flex'; // 显示容器
};

// 显示屏幕五的信息
const displayScreenFive = (data, color) => {
elements.ems.innerHTML = translationStrings.ems_online; // EMS在线文本
elements.online.innerHTML = translationStrings.currently_online + data.emsOnline; // 当前在线人数
elements.ems.style.color = color; // 设置EMS颜色
Object.assign(elements.container.style, { bottom: "5%", top: "20%" });
Object.assign(elements.emsCounter.style, {
   display: "block",
   top: "10px",
   left: "50%",
   transform: "translateX(-50%)",
   textAlign: "center"
});

Object.assign(elements.timerContainer.style, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   marginBottom: '20px'
});

elements.dyingHeader.innerHTML = translationStrings.player_dying; // 死亡提示

applyGradientTextEffect(elements.dyingHeader, color, 5); // 应用渐变文本效果

elements.dyingHeader.style.fontSize = "1.6rem"; // 设置字体大小
elements.dyingHeader.style.fontWeight = "800"; // 设置字体加粗
elements.dyingHeader.style.marginBottom = "6px"; // 设置底部外边距

// 设置计时框样式
elements.timerBoxes.forEach(element => {
   Object.assign(element.style, {
         background: "linear-gradient(to top right, rgba(211, 211, 211, 0.2), rgba(211, 211, 211, 0.00))",
         padding: "15px 15px",
         borderRadius: "1px",
         margin: "0 5px",
         display: "flex",
         fontSize: "1.4rem",
         fontWeight: "bolder",
         border: ".5px solid rgba(211, 211, 211, 0.2)"
   });
});

elements.timerSeparator.innerHTML = ":"; // 设置时间分隔符
elements.timerSeparator.style.margin = "0px 8px"; // 设置左、右外边距

elements.timerHeader.innerHTML = translationStrings.player_hurt_severe; // 严重受伤提示
Object.assign(elements.timerHeader.style, {
   fontWeight: "normal",
   color: "rgb(185, 185, 185)",
   marginBottom: ".7%",
   fontSize: ".8rem"
});

elements.timerSubheader.innerHTML = translationStrings.player_hurt_find_help_or_ems.toUpperCase(); // 副标题
Object.assign(elements.timerSubheader.style, {
   marginBottom: "2%",
   marginTop: "1%",
   fontWeight: "500",
   fontSize: ".7rem"
});

elements.emergencyText.innerHTML = ""; // 清空紧急文本
elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.429)'; // 设置背景色
updateTimerDisplay(data.counter); // 更新计时器显示

// 计算分钟和秒数并更新显示
const minutes = Math.floor(data.counter / 60);
const seconds = data.counter % 60;
elements.minuteTens.innerHTML = Math.floor(minutes / 10);
elements.minuteOnes.innerHTML = minutes % 10;
elements.secondTens.innerHTML = Math.floor(seconds / 10);
elements.secondOnes.innerHTML = seconds % 10;

elements.container.style.display = 'flex'; // 显示容器
};

// 监听消息事件
window.addEventListener('message', (event) => {
// 当接收到"显示死亡屏幕"命令时
if (event.data.action === "displayDeathScreen") {
   color = event.data.color; // 获取颜色
   translationStrings = event.data.translationStrings; // 获取翻译字符串

   elements.dyingHeader.innerHTML = translationStrings.player_dying; // 设置死亡提示
   elements.timerHeader.innerHTML = translationStrings.time_to_respawn; // 设置重生时间提示
   elements.emergencyText.innerHTML = translationStrings.player_hurt_find_help_or_ems; // 设置急救提示

   setColorCSSRule(color); // 设置颜色的CSS规则

   // 根据不同类型显示相应的屏幕
   switch (event.data.type) {
         case 1: displayScreenOne(event.data, color); break;
         case 2: displayScreenTwo(event.data, color); break;
         case 3: displayScreenThree(event.data, color); break;
         case 4: displayScreenFour(event.data, color); break;
         case 5: displayScreenFive(event.data, color); break;
   }
}

// 更新死亡屏幕信息
if (event.data.action === "updateDeathScreen") {
   elements.online.innerHTML = translationStrings.currently_online + (event.data.emsOnline || 0); // 更新在线人数

   // 根据不同情况调整EMS显示
   if (!event.data.showCount) {
         elements.ems.style.display = "none"; // 隐藏EMS
         elements.online.style.display = "none"; // 隐藏在线人数
   } else if (event.data.emsOnline < 1) {
         elements.online.style.display = "none"; // 隐藏在线人数
         elements.ems.innerHTML = translationStrings.ems_offline; // 显示EMS离线提示
         elements.emsCounter.style.bottom = "40px"; // 调整EMS计数器位置
         elements.ems.style.color = "rgba(195, 7, 63, 1)"; // 设置颜色
   } else {
         elements.ems.innerHTML = translationStrings.ems_online; // 显示EMS在线提示
         elements.ems.style.color = event.data.color; // 设置颜色
         elements.online.style.display = "block"; // 显示在线人数
   }

   // 根据不同类型更新提示信息
   switch (event.data.type) {
         case 1:
         case 2:
            if (event.data.dispatched) elements.emergencyText.innerHTML = translationStrings.ems_on_the_way; // EMS正在赶来
            if (event.data.canRespawn) {
               elements.dyingHeader.innerHTML = translationStrings.player_passed; // 玩家已去世
               elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn; // 重生倒计时
            }
            break;
         case 3:
         case 4:
            if (event.data.dispatched) elements.timerHeader.innerHTML = translationStrings.ems_on_the_way; // EMS正在赶来
            if (event.data.canRespawn) {
               elements.dyingHeader.innerHTML = translationStrings.player_hurt_unconscious; // 玩家失去意识
               elements.timerSubheader.innerHTML = translationStrings.player_hurt_respawn; // 重生倒计时
            }
            break;
         case 5:
            if (event.data.dispatched) elements.timerSubheader.innerHTML = translationStrings.ems_on_the_way; // EMS正在赶来
            if (event.data.canRespawn) {
               elements.dyingHeader.innerHTML = translationStrings.player_hurt_unconscious.toUpperCase(); // 玩家失去意识
               elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn; // 重生倒计时
            }
            break;
   }

   // 更新计时器显示
   updateTimerDisplay(event.data.counter);

   // 检查屏幕类型并更新计时器
   if (.includes(event.data.type)) {
         const minutes = Math.floor(event.data.counter / 60);
         const seconds = event.data.counter % 60;
         elements.minuteTens.innerHTML = Math.floor(minutes / 10);
         elements.minuteOnes.innerHTML = minutes % 10;
         elements.secondTens.innerHTML = Math.floor(seconds / 10);
         elements.secondOnes.innerHTML = seconds % 10;
   }

   elements.container.style.display = 'flex'; // 显示容器
}

// 隐藏死亡屏幕
if (event.data.action === "hideDeathScreen") {
   elements.emsCounter.style.display = "none"; // 隐藏EMS计数器
   elements.container.style.display = 'none'; // 隐藏容器
   elements.body.style.backgroundColor = ''; // 恢复背景色
   elements.body.style.backgroundImage = 'none'; // 移除背景图片
}
});

以上是代码的逐行注释和对应的中文翻译。请根据需要调整注释内容。如果有其他问题或需要帮助，请随时告知！

页: [1]

FiveM技术教程分享's Archiver

注释