javascript设置淡入淡出效果

编码

淡出

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

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

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

    
    


    

    淡出
    

因为文档的不透明度设置是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！！