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

最新推荐文章于 2019-08-11 18:21:49 发布

流浪的宇滴

最新推荐文章于 2019-08-11 18:21:49 发布

阅读量155

点赞数

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

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

版权

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

15 篇文章 0 订阅

订阅专栏

前端基础

8 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

这是用setInterval来实现的淡入淡出，感觉和上一篇没啥区别，2333。看看setTimeout实现淡入淡出

<!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 obj = document.querySelector('div');
    var btn = document.querySelector('button');  
    obj.style.opacity = 1;
    var opa = parseFloat(obj.style.opacity);
    
    btn.addEventListener('click', fade_out, false);
    //淡出方法
    function fade_out() {
      var out = setInterval(function() {
      	if (opa <= 0) {         
        btn.textContent = '淡入';
        btn.disabled = false;
        clearInterval(out);
        btn.removeEventListener('click', fade_out);
        btn.addEventListener('click', fade_in);
      }else{ 
        btn.disabled = true;
        opa -= 0.1;
        obj.style.opacity = opa;
      }
      }, 100);
    }

    
//淡入方法
    function fade_in() {
      var ov = setInterval(function(){
        if (opa >= 1) {
          btn.textContent = '淡出';
          btn.disabled = false;
          clearInterval(ov); 
        }else{
          btn.disabled = true;
          opa += 0.1;
          obj.style.opacity = opa;
        }
      }, 100)
    }

  </script>
</body>
</html>

流浪的宇滴

关注

0
点赞
踩
0

收藏

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

这是用setInterval来实现的淡入淡出，感觉和上一篇没啥区别，2333。看看setTimeout实现淡入淡出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>&...
复制链接

扫一扫

专栏目录