用DEEPSEEK辅助生成
<!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: 'Microsoft YaHei', Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.container {
background-color: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.resistor {
display: flex;
justify-content: center;
margin: 30px 0;
position: relative;
}
.resistor-body {
width: 380px;
height: 80px;
background-color: #f0d9b5;
position: relative;
border-radius: 5px;
}
.band {
position: absolute;
height: 100%;
width: 20px;
top: 0;
border-radius: 3px;
}
.wire {
width: 50px;
height: 5px;
background-color: #aaa;
margin-top: 37.5px;
}
.controls {
display: flex;
flex-direction: column;
gap: 15px;
margin: 20px 0;
}
.answer-input {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.input-group {
display: flex;
align-items: center;
gap: 10px;
}
label {
font-weight: bold;
min-width: 120px;
}
input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
flex-grow: 1;
}
button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s;
}
button:hover {
background-color: #2980b9;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.feedback {
margin: 20px 0;
padding: 15px;
border-radius: 5px;
display: none;
}
.correct {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.incorrect {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.explanation {
background-color: #e2e3e5;
color: #383d41;
border: 1px solid #d6d8db;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
display: none;
}
.attempts {
text-align: center;
margin: 10px 0;
font-weight: bold;
}
.color-code-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.color-code-table th, .color-code-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.color-code-table th {
background-color: #f2f2f2;
}
.color-sample {
width: 20px;
height: 20px;
display: inline-block;
border: 1px solid #999;
vertical-align: middle;
margin-right: 5px;
border-radius: 3px;
}
.resistor-type-selector {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.resistor-type-btn {
padding: 8px 16px;
background-color: #e0e0e0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.resistor-type-btn.active {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<h1>色环电阻识别练习</h1>
<div class="container">
<div class="resistor-type-selector">
<button id="four-band-btn" class="resistor-type-btn active">四环电阻</button>
<button id="five-band-btn" class="resistor-type-btn">五环电阻</button>
</div>
<div class="attempts">尝试次数: <span id="attempt-count">0</span>/3</div>
<div class="resistor">
<div class="wire"></div>
<div class="resistor-body">
<div class="band" id="question-band1" style="left: 30px;"></div>
<div class="band" id="question-band2" style="left: 80px;"></div>
<div class="band" id="question-band3" style="left: 130px; display: none;"></div>
<div class="band" id="question-band4" style="left: 180px;"></div>
<div class="band" id="question-band5" style="left: 290px;"></div>
</div>
<div class="wire"></div>
</div>
<div class="answer-input">
<div class="input-group">
<label for="resistance-input">电阻值 (Ω):</label>
<input type="number" id="resistance-input" placeholder="请输入电阻值">
</div>
<div class="input-group">
<label for="tolerance-input">容差 (±%):</label>
<input type="number" id="tolerance-input" placeholder="请输入容差" step="0.1">
</div>
<button id="submit-btn">提交答案</button>
<button id="next-btn" style="display: none;">下一题</button>
</div>
<div class="feedback" id="feedback"></div>
<div class="explanation" id="explanation"></div>
</div>
<div class="container">
<h2>色环颜色编码表</h2>
<table class="color-code-table">
<tr>
<th>颜色</th>
<th>第一环<br>(第一位数字)</th>
<th>第二环<br>(第二位数字)</th>
<th>第三环<br>(第三位数字)</th>
<th>第四环<br>(乘数)</th>
<th>第五环<br>(容差)</th>
</tr>
<tr>
<td><span class="color-sample" style="background-color: black;"></span>黑色</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>×10<sup>0</sup></td>
<td>-</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: brown;"></span>棕色</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>×10<sup>1</sup></td>
<td>±1%</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: red;"></span>红色</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>×10<sup>2</sup></td>
<td>±2%</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: orange;"></span>橙色</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>×10<sup>3</sup></td>
<td>-</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: yellow;"></span>黄色</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>×10<sup>4</sup></td>
<td>-</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: green;"></span>绿色</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>×10<sup>5</sup></td>
<td>±0.5%</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: blue;"></span>蓝色</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>×10<sup>6</sup></td>
<td>±0.25%</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: violet;"></span>紫色</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>×10<sup>7</sup></td>
<td>±0.1%</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: gray;"></span>灰色</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>×10<sup>8</sup></td>
<td>±0.05%</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: white;"></span>白色</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>×10<sup>9</sup></td>
<td>-</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: gold;"></span>金色</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>×10<sup>-1</sup></td>
<td>±5%</td>
</tr>
<tr>
<td><span class="color-sample" style="background-color: silver;"></span>银色</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>×10<sup>-2</sup></td>
<td>±10%</td>
</tr>
</table>
</div>
<script>
// 常用电阻值规格 (E24系列)
const standardResistors = [
10, 11, 12, 13, 15, 16, 18, 20, 22, 24, 27, 30,
33, 36, 39, 43, 47, 51, 56, 62, 68, 75, 82, 91,
100, 110, 120, 130, 150, 160, 180, 200, 220, 240, 270, 300,
330, 360, 390, 430, 470, 510, 560, 620, 680, 750, 820, 910,
1000, 1100, 1200, 1300, 1500, 1600, 1800, 2000, 2200, 2400, 2700, 3000,
3300, 3600, 3900, 4300, 4700, 5100, 5600, 6200, 6800, 7500, 8200, 9100,
10000, 11000, 12000, 13000, 15000, 16000, 18000, 20000, 22000, 24000, 27000, 30000,
33000, 36000, 39000, 43000, 47000, 51000, 56000, 62000, 68000, 75000, 82000, 91000,
100000, 110000, 120000, 130000, 150000, 160000, 180000, 200000, 220000, 240000, 270000, 300000,
330000, 360000, 390000, 430000, 470000, 510000, 560000, 620000, 680000, 750000, 820000, 910000,
1000000
];
// 色环颜色定义（中文名称）
const colorCodes = {
black: { value: 0, multiplier: 1, tolerance: null, color: 'black', name: "黑色" },
brown: { value: 1, multiplier: 10, tolerance: '±1%', color: 'brown', name: "棕色" },
red: { value: 2, multiplier: 100, tolerance: '±2%', color: 'red', name: "红色" },
orange: { value: 3, multiplier: 1000, tolerance: null, color: 'orange', name: "橙色" },
yellow: { value: 4, multiplier: 10000, tolerance: null, color: 'yellow', name: "黄色" },
green: { value: 5, multiplier: 100000, tolerance: '±0.5%', color: 'green', name: "绿色" },
blue: { value: 6, multiplier: 1000000, tolerance: '±0.25%', color: 'blue', name: "蓝色" },
violet: { value: 7, multiplier: 10000000, tolerance: '±0.1%', color: 'violet', name: "紫色" },
gray: { value: 8, multiplier: 100000000, tolerance: '±0.05%', color: 'gray', name: "灰色" },
white: { value: 9, multiplier: 1000000000, tolerance: null, color: 'white', name: "白色" },
gold: { value: null, multiplier: 0.1, tolerance: '±5%', color: 'gold', name: "金色" },
silver: { value: null, multiplier: 0.01, tolerance: '±10%', color: 'silver', name: "银色" }
};
// 当前题目和用户选择
let currentResistor = null;
let attemptCount = 0;
let isFiveBand = false;
// DOM元素
const questionBands = {
band1: document.getElementById('question-band1'),
band2: document.getElementById('question-band2'),
band3: document.getElementById('question-band3'),
band4: document.getElementById('question-band4'),
band5: document.getElementById('question-band5')
};
const resistanceInput = document.getElementById('resistance-input');
const toleranceInput = document.getElementById('tolerance-input');
const submitBtn = document.getElementById('submit-btn');
const nextBtn = document.getElementById('next-btn');
const feedbackDiv = document.getElementById('feedback');
const explanationDiv = document.getElementById('explanation');
const attemptCountSpan = document.getElementById('attempt-count');
const fourBandBtn = document.getElementById('four-band-btn');
const fiveBandBtn = document.getElementById('five-band-btn');
// 初始化
function init() {
generateNewQuestion();
setupEventListeners();
}
// 生成新题目
function generateNewQuestion() {
// 重置状态
resetQuestion();
// 从标准电阻值中随机选择一个
const baseValue = standardResistors[Math.floor(Math.random() * standardResistors.length)];
// 设置色环
if (isFiveBand) {
setupFiveBandResistor(baseValue);
} else {
setupFourBandResistor(baseValue);
}
}
// 设置四环电阻
function setupFourBandResistor(baseValue) {
// 隐藏第三环
questionBands.band3.style.display = 'none';
// 调整其他环的位置
questionBands.band1.style.left = '30px';
questionBands.band2.style.left = '80px';
questionBands.band4.style.left = '130px';
questionBands.band5.style.left = '210px';
// 转换为科学计数法形式 (例如 4700 -> 4.7 × 10^3)
const strValue = baseValue.toString();
let firstDigit = parseInt(strValue[0]);
let secondDigit = strValue.length > 1 ? parseInt(strValue[1]) : 0;
let exponent = strValue.length - 1;
// 处理第二位数为0的情况 (例如 100 -> 1.0 × 10^2)
if (secondDigit === 0 && strValue.length > 1) {
exponent = strValue.length - 1;
}
// 调整第二位数字和指数 (例如 4700 -> 47 × 10^2)
if (secondDigit !== 0) {
exponent = strValue.length - 2;
}
// 确保指数在有效范围内
exponent = Math.max(0, Math.min(exponent, 9));
// 确定色环颜色
const band1Color = Object.keys(colorCodes).find(
color => colorCodes[color].value === firstDigit && colorCodes[color].value !== null
);
const band2Color = Object.keys(colorCodes).find(
color => colorCodes[color].value === secondDigit && colorCodes[color].value !== null
);
const band4Color = Object.keys(colorCodes).find(
color => colorCodes[color].multiplier === Math.pow(10, exponent)
);
// 随机选择一个容差
const toleranceColors = ['brown', 'red', 'green', 'blue', 'violet', 'gray', 'gold', 'silver'];
const band5Color = toleranceColors[Math.floor(Math.random() * toleranceColors.length)];
// 设置当前电阻
currentResistor = {
band1: band1Color,
band2: band2Color,
band3: null,
band4: band4Color,
band5: band5Color,
value: baseValue,
tolerance: colorCodes[band5Color].tolerance,
isFiveBand: false
};
// 显示电阻色环
questionBands.band1.style.backgroundColor = colorCodes[band1Color].color;
questionBands.band2.style.backgroundColor = colorCodes[band2Color].color;
questionBands.band4.style.backgroundColor = colorCodes[band4Color].color;
questionBands.band5.style.backgroundColor = colorCodes[band5Color].color;
}
// 设置五环电阻
function setupFiveBandResistor(baseValue) {
// 显示第三环
questionBands.band3.style.display = 'block';
// 调整环的位置
questionBands.band1.style.left = '30px';
questionBands.band2.style.left = '80px';
questionBands.band3.style.left = '130px';
questionBands.band4.style.left = '180px';
questionBands.band5.style.left = '260px';
// 转换为科学计数法形式 (例如 4700 -> 4.7 × 10^3)
const strValue = baseValue.toString();
let firstDigit = parseInt(strValue[0]);
let secondDigit = strValue.length > 1 ? parseInt(strValue[1]) : 0;
let thirdDigit = strValue.length > 2 ? parseInt(strValue[2]) : 0;
let exponent = strValue.length - 2;
// 处理数字不足的情况
if (strValue.length === 1) {
secondDigit = 0;
thirdDigit = 0;
exponent = 0;
} else if (strValue.length === 2) {
thirdDigit = 0;
exponent = 0;
}
// 确保指数在有效范围内
exponent = Math.max(0, Math.min(exponent, 8));
// 确定色环颜色
const band1Color = Object.keys(colorCodes).find(
color => colorCodes[color].value === firstDigit && colorCodes[color].value !== null
);
const band2Color = Object.keys(colorCodes).find(
color => colorCodes[color].value === secondDigit && colorCodes[color].value !== null
);
const band3Color = Object.keys(colorCodes).find(
color => colorCodes[color].value === thirdDigit && colorCodes[color].value !== null
);
const band4Color = Object.keys(colorCodes).find(
color => colorCodes[color].multiplier === Math.pow(10, exponent)
);
// 随机选择一个容差
const toleranceColors = ['brown', 'red', 'green', 'blue', 'violet', 'gray', 'gold', 'silver'];
const band5Color = toleranceColors[Math.floor(Math.random() * toleranceColors.length)];
// 设置当前电阻
currentResistor = {
band1: band1Color,
band2: band2Color,
band3: band3Color,
band4: band4Color,
band5: band5Color,
value: baseValue,
tolerance: colorCodes[band5Color].tolerance,
isFiveBand: true
};
// 显示电阻色环
questionBands.band1.style.backgroundColor = colorCodes[band1Color].color;
questionBands.band2.style.backgroundColor = colorCodes[band2Color].color;
questionBands.band3.style.backgroundColor = colorCodes[band3Color].color;
questionBands.band4.style.backgroundColor = colorCodes[band4Color].color;
questionBands.band5.style.backgroundColor = colorCodes[band5Color].color;
}
// 重置题目状态
function resetQuestion() {
attemptCount = 0;
attemptCountSpan.textContent = attemptCount;
resistanceInput.value = '';
toleranceInput.value = '';
// 隐藏反馈和解释
feedbackDiv.style.display = 'none';
explanationDiv.style.display = 'none';
// 显示提交按钮，隐藏下一题按钮
submitBtn.style.display = 'block';
nextBtn.style.display = 'none';
}
// 检查答案
function checkAnswer() {
// 检查输入是否有效
const userResistance = parseFloat(resistanceInput.value);
const userTolerance = parseFloat(toleranceInput.value);
if (isNaN(userResistance)) {
alert('请输入有效的电阻值');
return;
}
attemptCount++;
attemptCountSpan.textContent = attemptCount;
// 检查答案
const toleranceMatch = currentResistor.tolerance === `±${userTolerance}%`;
const resistanceMatch = Math.abs(userResistance - currentResistor.value) < 0.1;
// 显示反馈
if (resistanceMatch && toleranceMatch) {
feedbackDiv.textContent = '✓ 回答正确！';
feedbackDiv.className = 'feedback correct';
feedbackDiv.style.display = 'block';
submitBtn.style.display = 'none';
nextBtn.style.display = 'block';
} else {
feedbackDiv.textContent = '✗ 回答错误';
feedbackDiv.className = 'feedback incorrect';
feedbackDiv.style.display = 'block';
if (attemptCount >= 3) {
showExplanation();
submitBtn.style.display = 'none';
nextBtn.style.display = 'block';
}
}
}
// 显示解释
function showExplanation() {
const band1 = currentResistor.band1;
const band2 = currentResistor.band2;
const band3 = currentResistor.band3;
const band4 = currentResistor.band4;
const band5 = currentResistor.band5;
let explanation = `
<h3>正确答案:</h3>
<p>电阻值: ${currentResistor.value}Ω ${currentResistor.tolerance}</p>
<h3>色环解读:</h3>
`;
if (currentResistor.isFiveBand) {
const digit1 = colorCodes[band1].value;
const digit2 = colorCodes[band2].value;
const digit3 = colorCodes[band3].value;
const multiplier = colorCodes[band4].multiplier;
explanation += `
<p>第一环 (${colorCodes[band1].name}): ${digit1}</p>
<p>第二环 (${colorCodes[band2].name}): ${digit2}</p>
<p>第三环 (${colorCodes[band3].name}): ${digit3}</p>
<p>第四环 (${colorCodes[band4].name}): ×${multiplier}</p>
<p>第五环 (${colorCodes[band5].name}): ${currentResistor.tolerance}</p>
<h3>计算过程:</h3>
<p>阻值 = (${digit1}${digit2}${digit3}) × ${multiplier} = ${digit1}${digit2}${digit3} × ${multiplier} = ${currentResistor.value}Ω ${currentResistor.tolerance}</p>
`;
} else {
const digit1 = colorCodes[band1].value;
const digit2 = colorCodes[band2].value;
const multiplier = colorCodes[band4].multiplier;
explanation += `
<p>第一环 (${colorCodes[band1].name}): ${digit1}</p>
<p>第二环 (${colorCodes[band2].name}): ${digit2}</p>
<p>第三环 (${colorCodes[band4].name}): ×${multiplier}</p>
<p>第四环 (${colorCodes[band5].name}): ${currentResistor.tolerance}</p>
<h3>计算过程:</h3>
<p>阻值 = (${digit1}${digit2}) × ${multiplier} = ${digit1}${digit2} × ${multiplier} = ${currentResistor.value}Ω ${currentResistor.tolerance}</p>
`;
}
explanationDiv.innerHTML = explanation;
explanationDiv.style.display = 'block';
}
// 切换电阻类型
function toggleResistorType(fiveBand) {
isFiveBand = fiveBand;
if (fiveBand) {
fourBandBtn.classList.remove('active');
fiveBandBtn.classList.add('active');
} else {
fiveBandBtn.classList.remove('active');
fourBandBtn.classList.add('active');
}
generateNewQuestion();
}
// 设置事件监听器
function setupEventListeners() {
submitBtn.addEventListener('click', checkAnswer);
nextBtn.addEventListener('click', generateNewQuestion);
fourBandBtn.addEventListener('click', () => toggleResistorType(false));
fiveBandBtn.addEventListener('click', () => toggleResistorType(true));
}
// 初始化应用
init();
</script>
</body>
</html>复制代码到文本文档保存，更改后缀为html，即可运行。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
