变量、函数与RGB调色器 ｜ 课型：实习课 ｜ 建议课时：3节
拖动三个滑块实时混合颜色并显示rgb值——2026纯JS版竞赛真题。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Task 10 - RGB Mixer</title>
<style>
* { margin: 0; padding: 0; }
body { display: flex; justify-content: center; align-items: center; height: 100vh;
background: #f2f6f8; font-family: Arial, sans-serif; }
.color { width: 500px; height: 300px; background-color: rgb(181, 116, 157);
display: flex; justify-content: center; align-items: center;
font-size: 20px; border-radius: 8px; }
input { margin: 20px 0; width: 500px; cursor: pointer; display: block; }
</style>
</head>
<body>
<div class="container">
<div class="color"><span>rgb(181, 116, 157)</span></div>
<input type="range" min="0" max="255" value="181" class="range" aria-label="红色">
<input type="range" min="0" max="255" value="116" class="range" aria-label="绿色">
<input type="range" min="0" max="255" value="157" class="range" aria-label="蓝色">
</div>
<script>
const sliders = document.querySelectorAll('.range');
const colorBox = document.querySelector('.color');
const label = document.querySelector('span');
function updateColor() {
const [r, g, b] = [...sliders].map(s => s.value);
const color = `rgb(${r}, ${g}, ${b})`;
label.textContent = color;
colorBox.style.backgroundColor = color;
}
sliders.forEach(slider => slider.addEventListener('input', updateColor));
</script>
</body>
</html>任务目标：掌握JS核心语法并完成竞赛任务10
| 任务内容与评分 |
|---|
| 任务1：用let/const声明变量并说明选择理由（10分） |
| 任务2：编写带返回值的函数calculateArea(r)（15分） |
| 任务3：用map把数组[1,2,3]变为[2,4,6]（15分） |
| 任务4：完成任务10 RGB滑块（40分） |
| 任务5：写出5组==与===的对比结果（20分） |