前端小计（setTimeout实现淡入淡出）——百度学院第二十到第二十一天：让你和页面对话

最新推荐文章于 2020-12-22 13:27:11 发布

流浪的宇滴

最新推荐文章于 2020-12-22 13:27:11 发布

阅读量291

点赞数

分类专栏：前端基础 js基础文章标签：前端基础 js基础 setTimeout setInterval opacity

本文链接：https://blog.csdn.net/qq_45358338/article/details/99084151

版权

js基础同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端基础

8 篇文章 0 订阅

订阅专栏

自己亲手做的，很基础吧！虽然很乱的样子，没办法，技术有限，只能做到这一步了。
贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="fade-obj" style="width: 300px; height: 300px; background: #000"></div>
  <button id="fade-btn">淡出</button>
  <script>
   //获取元素
    var div = document.querySelector('div');
    var btn = document.querySelector('button');
    //透明度：不透明；赋给变量opa
    div.style.opacity = 1;
    var opa = parseFloat(div.style.opacity);
    //给按钮添加监听事件fade_out
    btn.addEventListener('click', fade_out);
    //淡出方法
    function fade_out() {
      //让按钮不可用
      btn.setAttribute('disabled', '');
      //淡出
      opa -= 0.1;
      div.style.opacity = opa; 
      //定时器循环
      var Out = setTimeout(function() {
        if (opa <= 0) {
        //关闭定时器（犹豫初学，无法解决精度问题，所以无法精确的让opa == 0。滑稽）
        clearTimeout(Out);
        //移除按钮不可用
        btn.removeAttribute('disabled', '');
        //按钮变成淡入
        btn.innerHTML = '淡入';
        //移除监听事件fade_out
        btn.removeEventListener('click', fade_out); 
        //绑定监听事件fade_in
        btn.addEventListener('click', fade_in);
      }else {
        //调用自身
        fade_out();
        }
      },100)
    }
   //淡入方法
    function fade_in() {
      btn.setAttribute('disabled', '');
      opa += 0.1;
      div.style.opacity = opa;
      var In = setTimeout(function() {
        if (opa >= 1){
        clearTimeout(In);
        btn.removeAttribute('disabled', '');
        btn.innerHTML = '淡出';
      }else {
        fade_in();
        }
      }, 100);
    }  
  </script>      
</body>
</html>

在写的过程中，我发现了一个问题，没错。他就是精度的问题。在不透明度（opacity）0~1之间的淡入淡出过程中，我发现无法做到精确计算，所以只能这样做了。

流浪的宇滴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小计（setTimeout实现淡入淡出）——百度学院第二十到第二十一天：让你和页面对话

自己亲手做的，很基础吧！虽然很乱的样子，没办法，技术有限，只能做到这一步了。贴上代码：` Document 淡出 `在写的过程中，我发现了一个问题，没错。他就是精度的问题。在不透明度（opacity）0~1之间的淡入淡出过程中，我发现无法做到精确计算，所以只能这样做了。...
复制链接

扫一扫

专栏目录