5,当鼠标移到div时颜色逐渐变透明js

<style>
        div {
            width: 500px;
            height: 500px;
            background-color: rgb(255, 0, 0);
        }
</style>

<!--结构就一个div盒子-->
<div></div>

<script>
        // 获取元素
        var div = document.querySelector("div");
        div.onmouseover = function () {
            // 初始变量1  透明度就是0-1 之间
            var opacity = 1;
            var timeId = setInterval(function () {
                // 当鼠标移上去的时候,每0.05毫秒减0.1  
                opacity = opacity - 0.1;
                // 判断当opacity小=0时候移上去的时候 清除定时器
                if (opacity <= 0) {
                    clearInterval(timeId);
                }
                //设置div的透明度
                div.style.opacity = opacity;
            }, 50);

        }
</script>