CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon...
-
Upload
harry-aubrey-ford -
Category
Documents
-
view
223 -
download
3
Transcript of CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon...
![Page 1: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/1.jpg)
CSD 340 (Blum) 1
Drop-down list and timers
![Page 2: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/2.jpg)
CSD 340 (Blum) 2
Double click on the drop-down list icon to place one on the page.
![Page 3: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/3.jpg)
CSD 340 (Blum) 3
Change the name and id attributes
![Page 4: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/4.jpg)
CSD 340 (Blum) 4
Use the Style Builder dialog box to select a background color
![Page 5: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/5.jpg)
CSD 340 (Blum) 5
Use the Style Builder dialog box to set the width
![Page 6: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/6.jpg)
CSD 340 (Blum) 6
Right click on the drop-down list and choose Properties
![Page 7: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/7.jpg)
CSD 340 (Blum) 7
Enter expressions into the Text and Value textboxes and click Insert to place data into list.
![Page 8: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/8.jpg)
CSD 340 (Blum) 8
Add more.
![Page 9: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/9.jpg)
CSD 340 (Blum) 9
Result in HTML view
![Page 10: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/10.jpg)
CSD 340 (Blum) 10
Add a large div (Grid Layout Panel). Give it an id.
![Page 11: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/11.jpg)
CSD 340 (Blum) 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
![Page 12: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/12.jpg)
CSD 340 (Blum) 12
Choose a color (I chose black – yeah I know it’s not really a color)
![Page 13: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/13.jpg)
CSD 340 (Blum) 13
Result
![Page 14: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/14.jpg)
CSD 340 (Blum) 14
Add two scripts – one in the head and one in the body
![Page 15: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/15.jpg)
CSD 340 (Blum) 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.
![Page 16: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/16.jpg)
CSD 340 (Blum) 16
Head code
<script>
function RenderShape()
{
alert("HI");
}
</script>
A function that display a message HI. It will be called every second.
![Page 17: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/17.jpg)
CSD 340 (Blum) 17
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;
Revised RenderShape() – part 1
![Page 18: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/18.jpg)
CSD 340 (Blum) 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;
}
![Page 19: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/19.jpg)
CSD 340 (Blum) 19
White rectangle moves around in a circle.
![Page 20: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/20.jpg)
CSD 340 (Blum) 20
Faster, faster.
• var timerID=setInterval("RenderShape()",100);
• Lower the number in the setInterval function to make the circle move around faster.
![Page 21: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/21.jpg)
CSD 340 (Blum) 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;}
![Page 22: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/22.jpg)
CSD 340 (Blum) 22
A set of rectangles moving in a circle.
![Page 23: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/23.jpg)
CSD 340 (Blum) 23
Introduce code to change color of rectanglesMyColor=(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>";
![Page 24: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/24.jpg)
CSD 340 (Blum) 24
Result
![Page 25: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/25.jpg)
CSD 340 (Blum) 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;
![Page 26: CSD 340 (Blum)1 Drop-down list and timers. CSD 340 (Blum)2 Double click on the drop-down list icon to place one on the page.](https://reader030.fdocuments.in/reader030/viewer/2022020721/56649f505503460f94c72a4f/html5/thumbnails/26.jpg)
CSD 340 (Blum) 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);
}
}