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!!

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值