<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.box{width: 500px;height: 400px;margin:100px auto;}
.red,.green,.blue{width: 275px;height: 20px;float: left;position: relative;border:1px solid #eee;margin:10px;color:white;line-height: 20px;text-align: center;user-select: none}
.mark{width:20px;height: 20px;background:#ccc;position: absolute;cursor: pointer;left:0;top:0;}
.show{width: 100px;height: 100px;border:1px solid #000;float: left;margin-left:50px;margin-top:-50px;}
.bag{width: 0;height: 20px;position: absolute;left:0;top:0;} //給顯示背景顏色的div 初始值 width為 0，背景色
這樣滑動了多少，width就是多少，背景色就能夠顯示多少
.red .bag{background:red;}
.green .bag{background:green;}
.blue .bag{background:blue;}
</style>
</head>
<body>
<div class="box">
<div class="red">
<div class="mark r">r</div> //滑動塊
<div class="bag"></div> // 背景顏色顯示在已經滑動的距離上面
</div>
<div class="green">
<div class="mark g">g</div>
<div class="bag"></div>
</div>
<div class="blue">
<div class="mark b">b</div>
<div class="bag"></div>
</div>
<div class="show"></div>
</div>
<script type="text/javascript">
var marks = document.querySelectorAll(".mark");
var show = document.querySelector(".show");
var r = document.querySelector(".r")
var g = document.querySelector(".g");
var b = document.querySelector(".b");
var bags = document.querySelectorAll(".bag");
for(let i = 0 ; i < marks.length;i++){
marks[i].onmousedown = function(evt){
//獲取到鼠標按下時候鼠標當前的位置
var x = evt.clientX;
//獲取到當前mark的坐標
var left = this.offsetLeft;
window.onmousemove = function(evt){
//獲取到鼠標移動時候的位置
var disx = evt.clientX - x //鼠標移動的距離就是盒子移動的距離
//此時盒子的坐標
var ws = left + disx;
ws<0 ? ws=0 : ws; //讓滑動塊始終存在於盒子的里面
ws > 255?ws=255: ws;
marks[i].style.left = ws + "px";
bags[i].style.width = ws + "px";
show.style.background= `rgb(${r.offsetLeft},${g.offsetLeft},${b.offsetLeft})` // 模板字符串 rgb(255,0,0)
}
window.onmouseup = function(){
window.onmousemove = null;
window.onmouseup = null;
}
}
}
</script>
</body>
</html>
解題思路：
滑動條滾動的距離即坐標的值 === rgb 顏色的值
1.滑動條的距離
鼠標移動的距離 + offsetLeft == 現在的坐標值 ===》 即為 rgb的顏色值
2.滑動多少 背景色是多少
*最開始沒有想出來*
在上面又添加一個div，專門用來顯示背景色，而背景色顯示到哪里，是根據我的滑動塊滑動到哪里決定的。
所以最開始給div設置 width :0 background:red 而滑動塊滑動的距離 賦給width，這樣就能顯示相應的背景色了。
file:///E:/%E6%9E%97%E9%9C%9C%E9%9B%AAJS/all%E7%BB%83%E4%B9%A0ppt/rgb%E9%A2%9C%E8%89%B2.html