gogongxt/tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
gogongxt
2025-11-28 11:15:09 +08:00
commit a268c2d731
4 changed files with 1162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

762
color_pick.html Normal file
View File

@@ -0,0 +1,762 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>颜色选择器</title>
<style>
body {
font-family: monospace, sans-serif;
margin: 20px;
}
input {
font-family: monospace, sans-serif; /* 为所有输入框设置等宽字体 */
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.color-picker {
display: flex;
flex-direction: column; /* Changed to column */
align-items: center; /* Center items horizontally */
margin-bottom: 20px;
}
.basic-color-controls {
display: flex;
flex-direction: row; /* Keep basic controls in a row */
align-items: center;
margin-bottom: 10px; /* Add some spacing */
}
.color-preview {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin-right: 20px;
}
.sliders {
display: flex;
flex-direction: column;
}
.slider-group {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.slider-label {
width: 30px;
margin-right: 10px;
}
input[type="range"] {
width: 200px;
}
.color-values {
margin-top: 20px;
}
.color-values div {
margin-bottom: 5px;
}
/* 颜色历史记录样式 */
.color-history {
display: flex;
margin-top: 20px;
}
.history-color {
width: 25px;
height: 25px;
border: 1px solid #ccc;
margin-right: 5px;
cursor: pointer;
}
/* 复制按钮样式 */
.copy-button {
background-color: #2196f3; /* Blue */
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
margin-left: 5px;
position: relative; /* 相对定位，方便对勾定位 */
}
.copy-button:hover {
background-color: #0b7dda;
}
/* 复制成功对勾样式 */
.copy-success-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
display: none; /* 初始隐藏 */
}
/* 错误提示 */
.error-message {
color: red;
margin-top: 5px;
}
/* 输入框样式 */
.input-container {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.input-group {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.input-group label {
margin-right: 5px;
}
.input-container input {
padding: 5px;
width: 50px; /* Adjusted width for RGB inputs */
margin-right: 5px;
}
.input-container #hex-input {
width: 150px; /* Adjusted width for Hex input */
}
.input-container button {
padding: 5px 10px;
cursor: pointer;
margin-left: 5px;
}
/* 新增样式 */
.advanced-color-picker {
display: flex;
margin-top: 20px;
}
.color-gradient {
width: 256px;
height: 256px;
background: linear-gradient(to right, white, red);
position: relative;
cursor: crosshair;
}
.color-gradient::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent, black);
}
.color-selector {
width: 12px;
height: 12px;
border: 1px solid black;
border-radius: 50%;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hue-slider {
width: 24px;
height: 256px;
background: linear-gradient(
to bottom,
hsl(360, 100%, 50%),
hsl(300, 100%, 50%),
hsl(240, 100%, 50%),
hsl(180, 100%, 50%),
hsl(120, 100%, 50%),
hsl(60, 100%, 50%),
hsl(0, 100%, 50%)
);
margin-left: 20px;
cursor: row-resize;
position: relative;
}
.hue-selector {
width: 30px;
height: 4px;
background-color: transparent;
border: 3px solid black;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.color-display {
width: 80px;
height: 80px;
border: 1px solid #ccc;
margin-left: 20px;
}
.color-info {
margin-left: 20px;
}
.copy-button.success {
background-color: #4caf50; /* Green */
}
</style>
</head>
<body>
<div class="container">
<h1>颜色选择器</h1>
<div class="color-picker">
<div class="basic-color-controls">
<div
id="color-preview"
class="color-preview"
style="background-color: #ffffff"
></div>
<div class="sliders">
<div class="slider-group">
<label for="red" class="slider-label">R:</label>
<input type="range" id="red" min="0" max="255" value="255" />
<span id="red-value">255</span>
</div>
<div class="slider-group">
<label for="green" class="slider-label">G:</label>
<input type="range" id="green" min="0" max="255" value="255" />
<span id="green-value">255</span>
</div>
<div class="slider-group">
<label for="blue" class="slider-label">B:</label>
<input type="range" id="blue" min="0" max="255" value="255" />
<span id="blue-value">255</span>
</div>
</div>
</div>
<div class="color-values">
<div>
RGB: <span id="rgb-value">rgb(255, 255, 255)</span>
<button class="copy-button" data-target="rgb">
复制 <span class="copy-success-icon">&#10004;</span>
</button>
</div>
<div>
Hex: <span id="hex-value">#ffffff</span>
<button class="copy-button" data-target="hex">
复制 <span class="copy-success-icon">&#10004;</span>
</button>
</div>
<div>
HSL: <span id="hsl-value">hsl(0, 0%, 100%)</span>
<button class="copy-button" data-target="hsl">
复制 <span class="copy-success-icon">&#10004;</span>
</button>
</div>
<div>
HSV: <span id="hsv-value">hsv(0, 0%, 100%)</span>
<button class="copy-button" data-target="hsv">
复制 <span class="copy-success-icon">&#10004;</span>
</button>
</div>
</div>
<!-- 高级颜色选择器 -->
<div class="advanced-color-picker">
<div class="color-gradient">
<div class="color-selector"></div>
</div>
<div class="hue-slider">
<div class="hue-selector"></div>
</div>
</div>
</div>
<!-- 输入框 -->
<div class="input-container">
<div class="input-group">
<label for="rgb-r">R:</label>
<input type="number" id="rgb-r" min="0" max="255" value="255" />
<label for="rgb-g">G:</label>
<input type="number" id="rgb-g" min="0" max="255" value="255" />
<label for="rgb-b">B:</label>
<input type="number" id="rgb-b" min="0" max="255" value="255" />
<button id="convert-rgb-button">转换 RGB</button>
</div>
<div class="input-group">
<label for="hex-input">Hex:</label>
<input type="text" id="hex-input" placeholder="输入 Hex 颜色值" />
<button id="convert-hex-button">转换 Hex</button>
</div>
<div id="input-error" class="error-message"></div>
</div>
<!-- 颜色历史记录 -->
<h2>颜色历史记录</h2>
<div class="color-history"></div>
</div>
<script>
const colorPreview = document.getElementById("color-preview");
const redSlider = document.getElementById("red");
const greenSlider = document.getElementById("green");
const blueSlider = document.getElementById("blue");
const redValue = document.getElementById("red-value");
const greenValue = document.getElementById("green-value");
const blueValue = document.getElementById("blue-value");
const rgbValue = document.getElementById("rgb-value");
const hexValue = document.getElementById("hex-value");
const hslValue = document.getElementById("hsl-value");
const hsvValue = document.getElementById("hsv-value");
const copyButtons = document.querySelectorAll(".copy-button");
const colorHistory = document.querySelector(".color-history");
const rgbRInput = document.getElementById("rgb-r");
const rgbGInput = document.getElementById("rgb-g");
const rgbBInput = document.getElementById("rgb-b");
const hexInput = document.getElementById("hex-input");
const convertRgbButton = document.getElementById("convert-rgb-button");
const convertHexButton = document.getElementById("convert-hex-button");
const inputError = document.getElementById("input-error");
// 高级颜色选择器元素
const colorGradient = document.querySelector(".color-gradient");
const colorSelector = document.querySelector(".color-selector");
const hueSlider = document.querySelector(".hue-slider");
const hueSelector = document.querySelector(".hue-selector");
let historyColors = []; // 存储颜色历史记录
let currentColor = { h: 0, s: 100, v: 100 }; // 存储当前颜色 HSV 值
// 更新颜色历史记录
function updateHistory(color) {
if (!historyColors.includes(color)) {
historyColors.unshift(color); // 添加到数组开头
if (historyColors.length > 10) {
historyColors.pop(); // 限制历史记录数量
}
renderHistory();
}
}
// 渲染颜色历史记录
function renderHistory() {
colorHistory.innerHTML = ""; // 清空历史记录
historyColors.forEach((color) => {
const historyDiv = document.createElement("div");
historyDiv.classList.add("history-color");
historyDiv.style.backgroundColor = color;
historyDiv.addEventListener("click", () => {
setColors(color);
});
colorHistory.appendChild(historyDiv);
});
}
// 将颜色值设置到所有控件
function setColors(color) {
const rgb = hexToRgb(color);
if (rgb) {
redSlider.value = rgb.r;
greenSlider.value = rgb.g;
blueSlider.value = rgb.b;
rgbRInput.value = rgb.r;
rgbGInput.value = rgb.g;
rgbBInput.value = rgb.b;
hexInput.value = color;
updateColor();
}
}
function updateColor() {
const red = parseInt(redSlider.value);
const green = parseInt(greenSlider.value);
const blue = parseInt(blueSlider.value);
redValue.textContent = red;
greenValue.textContent = green;
blueValue.textContent = blue;
rgbRInput.value = red;
rgbGInput.value = green;
rgbBInput.value = blue;
const rgb = `rgb(${red}, ${green}, ${blue})`;
rgbValue.textContent = rgb;
const hex = rgbToHex(red, green, blue);
hexValue.textContent = hex;
hexInput.value = hex;
const hsl = rgbToHsl(red, green, blue);
hslValue.textContent = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
const hsv = rgbToHsv(red, green, blue);
hsvValue.textContent = `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
colorPreview.style.backgroundColor = hex;
}
function rgbToHex(r, g, b) {
return (
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
);
}
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "03F")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
}
: null;
}
function rgbToHsl(r, g, b) {
(r /= 255), (g /= 255), (b /= 255);
const max = Math.max(r, g, b),
min = Math.min(r, g, b);
let h,
s,
l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100),
};
}
function rgbToHsv(r, g, b) {
r = r / 255;
g = g / 255;
b = b / 255;
let max = Math.max(r, g, b);
let min = Math.min(r, g, b);
let h,
s,
v = max;
let d = max - min;
s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0; // achromatic
} else {
if (max === r) {
h = (g - b) / d + (g < b ? 6 : 0);
} else if (max === g) {
h = (b - r) / d + 2;
} else if (max === b) {
h = (r - g) / d + 4;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
v: Math.round(v * 100),
};
}
function hsvToRgb(h, s, v) {
s = s / 100;
v = v / 100;
let r, g, b;
let i = Math.floor(h / 60);
let f = h / 60 - i;
let p = v * (1 - s);
let q = v * (1 - s * f);
let t = v * (1 - s * (1 - f));
switch (i % 6) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3:
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
}
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255),
};
}
redSlider.addEventListener("input", updateColor);
greenSlider.addEventListener("input", updateColor);
blueSlider.addEventListener("input", updateColor);
// 转换 RGB
convertRgbButton.addEventListener("click", function () {
const r = parseInt(rgbRInput.value);
const g = parseInt(rgbGInput.value);
const b = parseInt(rgbBInput.value);
if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
const color = rgbToHex(r, g, b);
inputError.textContent = "";
setColors(color);
updateHistory(color); // 在这里添加当前颜色到历史记录
} else {
inputError.textContent = "无效的 RGB 颜色值";
}
});
// 转换 Hex
convertHexButton.addEventListener("click", function () {
const input = hexInput.value.trim();
if (/^#([0-9a-f]{3}){1,2}$/i.test(input)) {
inputError.textContent = "";
setColors(input);
updateHistory(input); // 在这里添加当前颜色到历史记录
} else {
inputError.textContent = "无效的 Hex 颜色值";
}
});
// 复制到剪贴板 (兼容方案)
function copyToClipboard(text) {
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed"; // 防止页面滚动
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
const successful = document.execCommand("copy");
if (!successful) {
console.error("复制失败，请手动复制");
alert("复制失败，请手动复制");
}
} catch (err) {
console.error("复制失败: ", err);
alert("复制失败，请手动复制");
}
document.body.removeChild(textarea);
}
// 显示复制成功消息
function showCopySuccess(button) {
const successIcon = button.querySelector(".copy-success-icon");
const originalText = button.textContent;
button.classList.add("success"); // Add success class
button.textContent = "完成"; // Change button text
setTimeout(() => {
button.textContent = "复制"; // Restore original text
button.classList.remove("success"); // Remove success class
}, 1500);
}
// 复制到剪贴板
copyButtons.forEach((button) => {
button.addEventListener("click", function () {
const target = this.dataset.target;
let text = "";
let colorToSave = hexValue.textContent; // Always save hex value
switch (target) {
case "rgb":
text = rgbValue.textContent;
break;
case "hex":
text = hexValue.textContent;
break;
case "hsl":
text = hslValue.textContent;
break;
case "hsv":
text = hsvValue.textContent;
break;
}
copyToClipboard(text);
updateHistory(colorToSave);
showCopySuccess(this); // Pass the button element
});
});
// 高级颜色选择器事件
colorGradient.addEventListener("mousedown", (e) => {
updateGradientColor(e);
function updateGradientColor(e) {
const rect = colorGradient.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 限制选择器在渐变区域内
const boundedX = Math.max(0, Math.min(x, rect.width));
const boundedY = Math.max(0, Math.min(y, rect.height));
colorSelector.style.left = boundedX + "px";
colorSelector.style.top = boundedY + "px";
// 计算饱和度和亮度
const saturation = (boundedX / rect.width) * 100;
const value = (1 - boundedY / rect.height) * 100;
currentColor.s = saturation;
currentColor.v = value;
updateFromAdvancedColor(); // Update everything from advanced color
}
function stopUpdate() {
document.removeEventListener("mousemove", updateGradientColor);
document.removeEventListener("mouseup", stopUpdate);
}
document.addEventListener("mousemove", updateGradientColor);
document.addEventListener("mouseup", stopUpdate);
});
hueSlider.addEventListener("mousedown", (e) => {
updateHue(e);
function updateHue(e) {
const rect = hueSlider.getBoundingClientRect();
const y = e.clientY - rect.top;
// 限制选择器在渐变区域内
const boundedY = Math.max(0, Math.min(y, rect.height));
hueSelector.style.top = boundedY + "px";
// 计算色相
const hue = ((1 - boundedY / rect.height) * 360) % 360;
currentColor.h = hue;
updateFromAdvancedColor(); // Update everything from advanced color
}
function stopUpdate() {
document.removeEventListener("mousemove", updateHue);
document.removeEventListener("mouseup", stopUpdate);
}
document.addEventListener("mousemove", updateHue);
document.addEventListener("mouseup", stopUpdate);
});
// 更新所有颜色控件
function updateFromAdvancedColor() {
const rgb = hsvToRgb(currentColor.h, currentColor.s, currentColor.v);
// Update basic sliders
redSlider.value = rgb.r;
greenSlider.value = rgb.g;
blueSlider.value = rgb.b;
// Update input boxes
rgbRInput.value = rgb.r;
rgbGInput.value = rgb.g;
rgbBInput.value = rgb.b;
// Call the main updateColor function to update everything else
updateColor();
// Update gradient background
colorGradient.style.background = `linear-gradient(to right, white, hsl(${currentColor.h}, 100%, 50%))`;
}
renderHistory(); // 初始化颜色历史记录
updateColor(); // 初始化颜色显示
</script>
</body>
</html>

116
electricity_calculator.html Normal file
View File

@@ -0,0 +1,116 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>电费计算器</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="number"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 确保 padding 不会增加元素宽度 */
}
button {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
#results {
margin-top: 20px;
border-top: 1px solid #ccc;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>电费计算器</h1>
<label for="power">设备功耗 (瓦):</label>
<input type="number" id="power" placeholder="例如: 100" required />
<label for="hours">每日使用时长 (小时):</label>
<input type="number" id="hours" placeholder="例如: 8" required />
<label for="price">电价 (元/度):</label>
<input
type="number"
id="price"
placeholder="例如: 0.6"
step="0.01"
required
/>
<button onclick="calculateCost()">计算</button>
<div id="results">
<h2>计算结果</h2>
<p>每日电费: <span id="dailyCost"></span> 元</p>
<p>每周电费: <span id="weeklyCost"></span> 元</p>
<p>每月电费: <span id="monthlyCost"></span> 元</p>
<p>每年电费: <span id="yearlyCost"></span> 元</p>
</div>
</div>
<script>
function calculateCost() {
// 获取输入值
let power = parseFloat(document.getElementById("power").value);
let hours = parseFloat(document.getElementById("hours").value);
let price = parseFloat(document.getElementById("price").value);
// 验证输入
if (isNaN(power) || isNaN(hours) || isNaN(price)) {
alert("请输入有效的数字。");
return;
}
// 计算电费
let dailyCost = (power / 1000) * hours * price; // 度 = (瓦/1000) * 小时
let weeklyCost = dailyCost * 7;
let monthlyCost = dailyCost * 30; // 简单假设每月 30 天
let yearlyCost = dailyCost * 365;
// 显示结果
document.getElementById("dailyCost").textContent = dailyCost.toFixed(2);
document.getElementById("weeklyCost").textContent =
weeklyCost.toFixed(2);
document.getElementById("monthlyCost").textContent =
monthlyCost.toFixed(2);
document.getElementById("yearlyCost").textContent =
yearlyCost.toFixed(2);
}
</script>
</body>
</html>

47
index.html Normal file
View File

@@ -0,0 +1,47 @@
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>功能插件</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
button {
padding: 10px 15px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>功能插件</h1>
<button onclick="openCalculator()">电费计算器</button>
<button onclick="openNumber()">程序员计算器</button>
<button onclick="openColorPick()">颜色选择器</button>
<button onclick="openOtherFunction()">其他功能</button>
<!-- 可以添加更多按钮 -->
<script>
function openCalculator() {
window.open("electricity_calculator.html", "_blank");
}
function openNumber() {
window.open("number.html", "_blank");
}
function openColorPick() {
window.open("color_pick.html", "_blank");
}
function openOtherFunction() {
window.open("other_function.html", "_blank");
}
</script>
</body>
</html>

237
number.html Normal file
View File

@@ -0,0 +1,237 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>程序员进制计算器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
color: #333;
}
.input-section {
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
input[type="text"] {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
flex: 1;
}
.radio-group {
display: flex;
gap: 10px;
margin-top: 10px;
margin-bottom: 20px; /* 增加间距 */
}
.radio-group label {
font-size: 16px;
cursor: pointer;
}
button {
padding: 8px 16px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result-section {
margin-bottom: 20px;
background-color: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: left; /* 左对齐 */
}
.result-section p {
margin: 10px 0;
font-size: 18px;
color: #333;
}
.history-section {
width: 300px;
}
.history-section h2 {
font-size: 18px;
color: #333;
}
.history-list {
list-style-type: none;
padding: 0;
}
.history-list li {
padding: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 5px;
cursor: pointer;
font-size: 14px;
}
.history-list li:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>程序员进制计算器</h1>
<div class="input-section">
<input type="text" id="number-input" placeholder="请输入数字" />
<button onclick="convertNumber()">转换</button>
</div>
<div class="radio-group">
<label
><input type="radio" name="base" value="10" checked /> 十进制</label
>
<label><input type="radio" name="base" value="2" /> 二进制</label>
<label><input type="radio" name="base" value="8" /> 八进制</label>
<label><input type="radio" name="base" value="16" /> 十六进制</label>
</div>
<div class="result-section" id="result-section">
<!-- 计算结果将显示在这里 -->
</div>
<div class="history-section">
<h2>历史记录</h2>
<ul class="history-list" id="history-list">
<!-- 历史记录将显示在这里 -->
</ul>
</div>
<script>
const historyList = [];
function convertNumber() {
const numberInput = document.getElementById("number-input").value;
const base = document.querySelector('input[name="base"]:checked').value;
let decimal;
if (base === "10") {
decimal = parseInt(numberInput, 10);
} else if (base === "2") {
decimal = parseInt(numberInput, 2);
} else if (base === "8") {
decimal = parseInt(numberInput, 8);
} else if (base === "16") {
decimal = parseInt(numberInput, 16);
}
if (isNaN(decimal)) {
alert("请输入有效的数字！");
return;
}
const binary = formatBinary(decimal.toString(2)); // 格式化二进制
const hexadecimal = decimal.toString(16).toUpperCase();
const octal = decimal.toString(8);
const resultSection = document.getElementById("result-section");
resultSection.innerHTML = `
<p>十进制: <strong>${decimal}</strong></p>
<p>二进制: <strong>${binary}</strong></p>
<p>十六进制: <strong>${hexadecimal}</strong></p>
<p>八进制: <strong>${octal}</strong></p>
`;
const historyItem = {
input: numberInput,
base: base,
decimal: decimal,
binary: binary,
hexadecimal: hexadecimal,
octal: octal,
};
historyList.unshift(historyItem); // 将最新记录添加到最前面
updateHistoryList();
}
function formatBinary(binary) {
// 从右往左每隔4位加一个空格
return binary
.split("") // 将字符串转为数组
.reverse() // 反转数组，从右往左处理
.join("") // 重新拼接为字符串
.replace(/(\d{4})/g, "\$1 ") // 每隔4位加一个空格
.split("") // 再次转为数组
.reverse() // 反转回原始顺序
.join("") // 重新拼接为字符串
.trim(); // 去除首尾多余的空格
}
function updateHistoryList() {
const historyListElement = document.getElementById("history-list");
historyListElement.innerHTML = "";
historyList.forEach((item, index) => {
const listItem = document.createElement("li");
let displayText = "";
if (item.base === "10") {
displayText = `十进制: ${item.input}`;
} else if (item.base === "2") {
displayText = `二进制: ${item.input}`;
} else if (item.base === "8") {
displayText = `八进制: ${item.input}`;
} else if (item.base === "16") {
displayText = `十六进制: ${item.input}`;
}
listItem.textContent = displayText;
listItem.addEventListener("click", () => showHistoryResult(index));
historyListElement.appendChild(listItem);
});
}
function showHistoryResult(index) {
const item = historyList[index];
const resultSection = document.getElementById("result-section");
resultSection.innerHTML = `
<p>十进制: <strong>${item.decimal}</strong></p>
<p>二进制: <strong>${item.binary}</strong></p>
<p>十六进制: <strong>${item.hexadecimal}</strong></p>
<p>八进制: <strong>${item.octal}</strong></p>
`;
}
</script>
</body>
</html>