先来看一下最终效果，这个效果由两部分组成：一是点击改变元件颜色，二是拖动改变元件不透明度；
一、改变颜色部分：
1、先创建一个动态面板，命名为“变色元件”；
2、然后在这个动态面板中添加几个状态，每个状态显示不同的颜色；
3、创建几个矩形，数量和颜色与上面动态面板的状态一一对应
4、给上面的几个矩形添加选中样式；
5、将上面的几个矩形添加选中样式到同一个选项组，并给每个矩形添加两个点击事件；
一是点击时选中当前元件，二是点击时切换“变色元件”的面板状态；
6、这样变色部分就做好了，先看一下效果
二、改变不透明度部分：
1、先画如图中的几个元件，进度条宽度为600px；
2、先将“滑块”和“不透明度数值”组合成一个动态面板，命名为“，移动滑块”，然后按下图位置进行排版；
3、给“移动滑块”添加拖动效果，移动方式设置为 跟随水平移动，左边界>=“进度条背景”的左边界，右边界<=“进度条背景”的右边界；
4、设置“进度条前景”的尺寸，高度固定，宽度随“移动滑块”位置的改变而改变，“进度条前景”的宽度=“移动滑块”左边距-“进度条前景”左边距；
5、设置“不透明度数值”的数字，因为不透明度的范围是0~100，进度条的最大宽度为600px，所以用“进度条前景”÷6 的结果刚好在0~100之间；
toFixed(0)函数的作用是保留整数；
6、设置不透明度，将“变色元件”的不透明度设置为“不透明度数值”的数字；
7、最后，将两部分组合在一起，最终效果就完成了，喜欢的话记得点赞哦！
