用定时器实现色块颜色渐变/色块切换效果（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;
    }
}

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