Drop-down list and timers

1. Drop-down list and timers

2. Double click on the drop-down list icon to place one on the page.

3. Change the name and id attributes

4. Use the Style Builder dialog box to select a background color

5. Use the Style Builder dialog box to set the width

6. Right click on the drop-down list and choose Properties

7. Enter expressions into the Text and Value textboxes and click Insert to place data into list.

8. Add more.

9. Result in HTML view

10. Add a large div (Grid Layout Panel). Give it an id.

11. Click in the general document (on the page but not in the div or the drop down list) and click on the bgcolor attribute

12. Choose a color (I chose black – yeah I know it’s not really a color)

13. Result

14. Add two scripts – one in the head and one in the body

15. Body code <script> var timerID=setInterval("RenderShape()",1000); </script> This code establishes a timer that “raises” a timer event every 1000 milliseconds (every second). It calls the RenderShape function that is placed in the head.

16. Head code <script> function RenderShape() { alert("HI"); } </script> A function that display a message HI. It will be called every second.

17. Revised RenderShape() – part 1 var AngleOffSet=0; function RenderShape() { var RectHTML; var XCenter = 300; var YCenter = 300; var PI=Math.atan(1)*4; var Angle; var Radius= 200; var XPosition; var YPosition;

18. Revised RenderShape() – part 2 AngleOffSet = AngleOffSet - 5; Angle = (AngleOffSet)*2*PI/360; XPosition=XCenter+Radius*Math.cos(Angle); YPosition=YCenter+Radius*Math.sin(Angle); RectHTML="<div style=\"height: 60px; width: 40px; position: absolute; top:"+YPosition+"px; left: "+XPosition+"px; background: #FFFFFF\" ms_positioning=\"GridLayout\"></div>"; MyDiv.innerHTML = RectHTML; }

19. White rectangle moves around in a circle.

20. Faster, faster. • var timerID=setInterval("RenderShape()",100); • Lower the number in the setInterval function to make the circle move around faster.

21. AngleOffSet = AngleOffSet - 5; MyDiv.innerHTML=""; for(i=15; i>=0; i--) { Angle = (AngleOffSet+i*i)*2*PI/360; XPosition=XCenter+Radius*Math.cos(Angle); YPosition=YCenter+Radius*Math.sin(Angle); RectHTML="<div style=\"height: 60px; width: 40px; position: absolute; top:"+YPosition+"px; left: "+XPosition+"px; background: #FFFFFF\" ms_positioning=\"GridLayout\"></div>"; MyDiv.innerHTML += RectHTML; }

22. A set of rectangles moving in a circle.

23. Introduce code to change color of rectangles MyColor=(255-17*i).toString(16)+(255-17*i).toString(16)+(255-17*i).toString(16); RectHTML="<div style=\"height: 60px; width: 40px; position: absolute; top:"+YPosition+"px; left: "+XPosition+"px; background: #"+MyColor+"\" ms_positioning=\"GridLayout\"></div>";

24. Result

25. for(i=15; i>=0; i--) { switch(selShape.value) { case "circ": Angle = (AngleOffSet+i*i)*2*PI/360; XPosition=XCenter+Radius*Math.cos(Angle); YPosition=YCenter+Radius*Math.sin(Angle); break; case "card": Angle = (AngleOffSet+i*i)*2*PI/360; Radius = 200*(1+Math.cos(Angle)); XPosition=XCenter+Radius*Math.cos(Angle); YPosition=YCenter+Radius*Math.sin(Angle); break;

26. case "astr": Angle = (AngleOffSet+i*i)*2*PI/360; XPosition=XCenter+Radius*Math.cos(Angle)*Math.cos(Angle)*Math.cos(Angle); YPosition=YCenter+Radius*Math.sin(Angle)*Math.sin(Angle)*Math.sin(Angle); } }