-
<script>
-
var speed = 20; // set the speed the lower the number the faster
-
var direction = "0"; //forward = 0 backwards = 1
-
var fontsize = "50px"; // set the font size
-
var farray = ["|", "/", "-", "\\"]; // set the array
-
if (direction==0) { var i = 0; } else { var i = farray.length-1; } // set the variable i globally as 0 if its going forward and the length of the array - 1 if its going backwards
-
var spinTime = window.setInterval("doSpin()", speed); // make the interval
-
function doSpin() {
-
var span = document.getElementById("spin"); // get the span by id.
-
span.innerHTML = ""; // reset the innerHTML of the span to nothing
-
span.innerHTML = "<font size=\""+fontsize+"\"><b>"+farray[i]+"</b></font>"; // set the innerHTML of the span to the next item in the array.. fonts to make it beuatiful.
-
if (direction==0) { i++; if (i==4) { i = 0; } } else { i--; if (i==-1) { i = farray.length-1; } } // if forward then you add to i.. if backwards you subtract from i because your starting at the end of the array
-
}
-
function resetSpeed(val) {
-
speed = val;
-
clearInterval(spinTime);
-
spinTime = window.setInterval("doSpin()", speed); // make the interval
-
}
-
</script>
-
<!--Made some buttons to show how you could swap the direction easily-->
-
<input type="button" value="Forward" onclick="direction=0;"><input type="button" value="Backward" onclick="direction=1;"><br>
-
Speed: <select onchange="resetSpeed(this.value)"><option value="1">1</option><option value="10">10</option><option value="20">20</option><option value="40">40</option><option value="80">80</option><option value="160">160</option><option value="320">320</option><option value="640">640</option><option value="1280">1280</option></select><br>
-
<span id="spin"></span>
-
-
this worked fine in firefox and ie... i made a small change to the buttons to make them work in firefox.. for some reason it needed a line break after <!-- -->
font changes work and I also made it a variable for you just try changing it by large values like from 5 to 20 or 20 to 40 you will see that it is changing.
Do you understand how the code is working I tried to leave as many comments as possible.
added in speed control just so you could see the kind of stuff you can do.
