javascript设置淡入淡出效果

编码

<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>

针对以上 HTML，分别使用 setTimeout 和 setInterval 实现以下功能：

点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
在动画过程中，按钮的状态变为不可点击
在动画结束后，按钮状态恢复，且文字变成“淡入”
在按钮显示淡入的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
淡入动画结束后，按钮文字变为“淡出”

在做到这一练习题时遇到了一些问题，怕以后忘了先写下来，以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="fade-obj" style="width:300px;height:300px;background:#000;"></div>
    <button id="fade-btn">淡出</button>
    <script>
        var oDiv = document.getElementById("fade-obj");
        var fadeBtn = document.getElementById("fade-btn");
        var opacity = 1;
        fadeBtn.onclick = change120;
        function change120() {
                if(opacity)
                {
                    setTimeout(change120,100);
                    opacity = Math.floor((opacity - 0.02)*100)/100;
                    oDiv.style.opacity = opacity.toString();
                    console.log(opacity);
                    fadeBtn.disabled = true;
                }
                else{
                    fadeBtn.disabled = false;
                    fadeBtn.innerText = "淡入";
                    fadeBtn.addEventListener("click",change021);
                }
        }
        function change021() {
            if(opacity!==1)
            {
                setTimeout(change021,100);
                opacity = Math.floor((opacity + 0.02)*100)/100;
                if(1-opacity<=0.01)
                    opacity = Math.floor(opacity + 0.02);
                oDiv.style.opacity = opacity.toString();
                console.log(opacity);
                fadeBtn.disabled = true;
            }
            else{
                fadeBtn.disabled = false;
                fadeBtn.innerText = "淡出";
                fadeBtn.addEventListener("click",change120);
            }
        }
    </script>
</body>
</html>

因为文档的不透明度设置是opacity，其值范围为0-1，为0时完全透明，为1时完全不透明，因此设定opacity不等于0为条件，通过“opacity=opacity - 0.02”改变其大小，opacity的变化如下：

通过截图可知，opacity0.92不是0.92，而是0.91999...，结果显然不是想要的，那么原因是甚麽呢，原来所有的JavaScript数字都是64位（8bit），在精度上，整数（不使用小数点或指数计数法）最多为 15 位。小数的最大位数是 17，但是浮点运算并不总是 100% 准确，

所以使用如下方法

opacity = Math.floor((opacity - 0.02)*100)/100;

这样就可以保留两位小数，并且得到了0.92！！

javascript设置淡入淡出效果

编码

猜你喜欢