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>
