用定时器实现色块颜色渐变/色块切换效果（HTML+CSS+JS）

原理：通过改变元素的 opacity 属性，切换显示两个重叠的、不同颜色的 div 块。 在 js 中实现单击事件和用定时器来控制渐变速度。

HTML：

<button class="change" id="change1">点一下变红</button><button class="change" id="change2">点一下变黄</button><div class="box1" id="box1"></div><div class="box2" id="box2"></div><!-- 导入js外部文件 -->

CSS：

.box1 {width: 400px;height: 400px;background-color: red;margin: 50px auto;position: absolute;left: 200px;}.box2 {width: 400px;height: 400px;background-color: yellow;margin: 50px auto;position: absolute;left: 200px;}.change{width: 100px;height: 100px;position: relative;left: 258px;margin-left: 20px;}

js：

// 获取两个切换按钮var change1 = document.getElementById("change1");var change2 = document.getElementById("change2");// 获取两个色块var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");// 初始定义两个色块的透明度，红色全透明，黄色不透明var op_num1 = 0;var op_num2 = 1;// 定时器标志，用来停止// 变红按钮的标志var timer_box1;var timer_box2;// 变黄按钮的标志var timer_box3;var timer_box4;// 变红按钮的点击事件change1.onclick = function () {// 每次初始化定时器之前清除操作，防止出现多次初始化定时器导致速度变快clearInterval(timer_box1);clearInterval(timer_box2);// 初始化定时器timer_box1 = setInterval(op_box1_onchange1, 50);timer_box2 = setInterval(op_box2_onchange1, 50);}// 控制变色函数，红色function op_box1_onchange1() {// 判断，使色块逐渐不透明if (op_num1 <= 1) {op_num1 += 0.01;// 改变透明度box1.style.opacity = op_num1;}}// 控制变色函数，黄色function op_box2_onchange1() {// // 判断，使色块逐渐透明if (op_num2 > 0) {op_num2 -= 0.01;// 改变透明度box2.style.opacity = op_num2;}else if (op_num2 <= 0) {// 透明度归零，防止出现负数op_num2 = 0;// 改变透明度box2.style.opacity = op_num2;}}// 变红按钮的点击事件change2.onclick = function () {// 每次初始化定时器之前清除操作，防止出现多次初始化定时器导致速度变快clearInterval(timer_box1);clearInterval(timer_box2);// 初始化定时器timer_box1 = setInterval(op_box1_onchange2, 50);timer_box2 = setInterval(op_box2_onchange2, 50);}// 控制变色函数，红色function op_box1_onchange2() {// 判断，使色块逐渐透明if (op_num1 > 0) {op_num1 -= 0.01;// 改变透明度box1.style.opacity = op_num1;}else if (op_num1 <= 0) {// 透明度归零，防止出现负数op_num1 = 0;// 改变透明度box1.style.opacity = op_num1;}}// 控制变色函数，黄色function op_box2_onchange2() {// 判断，使色块逐渐不透明if (op_num2 <= 1) {op_num2 += 0.01;// 改变透明度box2.style.opacity = op_num2;}}

关于在 if 中把 opacity 递减之后还进一步判断并置为0：其实如果不置为0的话也是可以运行的，只是属性会变成一个负数。可以通过改变定时器执行时间和 opacity 透明度属性的递增/递减幅度来改变色块渐变效果，数值越小，过渡越平滑。更改样式可以扩展此定时器的应用范围。