div计时器渐变/淡入淡出

最新推荐文章于 2021-06-18 22:39:24 发布

广东话的蛇皇

最新推荐文章于 2021-06-18 22:39:24 发布

阅读量246

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104293892

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

div计时器渐变/淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: hotpink;

    }
  </style>
</head>
<body>

<div id="div"></div>
<input type="button" value="渐变" id="btn"/>

<script>


  document.getElementById("btn").onclick=function () {

    var opacity=10;
    //按钮的点击事件
    var timeId=setInterval(function () {
      //透明化了
      opacity--;
      if(opacity<=0){
        clearInterval(timeId);//清理定时器
      }
      //设置div的透明度
      document.getElementById("div").style.opacity=opacity/10;
    },200);


  };












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