1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>DIV30度反射</title> 
  6. <script type="text/javascript">   
  7.     var x = 0;   
  8.     var y = 0;  
  9.     var dx = 10*Math.cos(30*3.1415926535898/180);   
  10.     var dy = 10*Math.sin(30*3.1415926535898/180);  
  11.     function move(d1){  
  12.         if ((x + dx) >= 970) dx = -dx;  
  13.         if ((x + dx) <= 0)   dx = -dx;  
  14.         if ((y + dy) >= 530) dy = -dy;  
  15.         if ((y + dy) <= 0)   dy = -dy;          
  16.         x = x + dx;  
  17.         y = y + dy;  
  18.         document.getElementById(d1).style.left = x;   
  19.         document.getElementById(d1).style.top  = y;   
  20.         setTimeout("move('d1')",10);   
  21. }  
  22. </script> 
  23. </head> 
  24.  
  25. <body> 
  26. <div id="d1" style="background-color: blue; position: absolute; left: 0px; top: 0px; width: 50px; height: 50px "   
  27.      onclick="move('d1')">div  
  28. </div> 
  29. </body> 
  30. </html>