夕阳落山图（js 夕阳下山）

最新推荐文章于 2021-08-03 23:17:50 发布

前端搬砖工程师

最新推荐文章于 2021-08-03 23:17:50 发布

阅读量261

点赞数 2

分类专栏： js 文章标签： javascript html

本文链接：https://blog.csdn.net/m0_47708359/article/details/106931040

版权

js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夕阳落山图</title>
   <style>
       
       #xy{
           width: 150px;
           height: 150px;
           background:radial-gradient(orange 30%, yellow);
           box-shadow: 0px 0px 15px yellow inset;
           border-radius: 50%;
       }
   </style>
</head>
<body>
    <button onclick="dian()">点击开始落山</button>
    <div id="xy"></div>
    </body>
</html>

JavaScript 代码

<script>
        var a,b;//创建两个变量，为太阳每次变化的位置
         function bt() {   
           var sd= document.getElementById('xy');
           if(a<=1800&&b<=900){             //太阳移动落下的最后位置
                sd.style.marginLeft=a+"px";         //太阳移动的值
                sd.style.marginTop=b+"px";
                a=a+25;         //每次移动的值
                b=b+10;
           }else{           //当太阳到达最后值时从新开始。
               a=0;
               b=0;
           }
          
         }
         var t;             //创建定时器
         function dian() {
             clearInterval(t);
            t=setInterval('bt()',500);
         }
    </script>

前端搬砖工程师

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夕阳落山图（js 夕阳下山）

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>夕阳落山图</title> <style> #xy{
复制链接

扫一扫

专栏目录