月食

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *
  8         {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         #box
 13         {
 14             width: 1000px;
 15             height: 600px;
 16             margin: 50px auto;
 17             position: relative;
 18         }
 19         #can
 20         {
 21             background: #000;
 22         }
 23         #bt1,#bt2
 24         {
 25             background: #000;
 26             color: #fff;
 27             font-size: 25px;
 28             position: fixed;
 29             left:40px;
 30             border: none;
 31         }
 32         #bt1
 33         {
 34             top: 230px;
 35         }
 36         #bt2
 37         {
 38             top: 300px;
 39         }
 40         #mode
 41         {
 42             width: 200px;
 43             height: 200px;
 44             background: #000;
 45             position: absolute;
 46             -webkit-border-radius:50%;
 47             -moz-border-radius:50%;
 48             border-radius:50%;
 49             left: 670px;
 50             top: 120px;
 51         }
 52     </style>
 53 </head>
 54 <body>
 55 <div id="box">
 56     <canvas width="1000" height="600" id="can"></canvas>
 57     <div id="mode"></div>
 58 </div>
 59 <button id="bt1">start</button>
 60 <button id="bt2">stop</button>
 61 <script >
 62     var bt1=document.getElementById('bt1');
 63     var bt2=document.getElementById('bt2');
 64     var mode=document.getElementById('mode');
 65     var can=document.getElementById('can');
 66     var ctx=can.getContext('2d');
 67     var time1=null;
 68     var x=670;
 69     var a=true;
 70     //白色
 71     ctx.beginPath();
 72     ctx.moveTo(200,200);
 73     ctx.arc(500,220,100,0,360,false);
 74     ctx.fillStyle='#fff';
 75     ctx.shadowBlur=50;
 76     ctx.shadowColor='yellow';
 77     ctx.fill();
 78     ctx.closePath();
 79 
 80     bt1.onclick=function () {
 81         clearInterval(time1);
 82         time1=setInterval(function () {
 83             //x轴方向
 84             if(a){
 85                 x-=3;
 86                 if (x<=160){
 87                     x=160;
 88                     a=false;
 89                 }
 90                 mode.style.left=x+"px";
 91             }else{
 92                 x+=3;
 93                 if(x>=670){
 94                     x=670;
 95                     a=true;
 96                 }
 97                 mode.style.left=x+"px";
 98             }
 99         },100)
100     };
101     bt2.onclick=function () {
102         clearInterval(time1);
103     }
104 </script>
105 </body>
106 </html>
index.html