Registreren

[RedRose]

Inleiding
SVG is een leuke techniek, die je kunt gebruiken om geometrische vormen in je webpagina te plaatsen. Ik heb een leuke miniapplicatie geschreven, waarin SVG dynamisch wordt gemaakt door middel van JavaScript. Eerst bouw ik de pagina dynamisch op, waarna ik, door manipulatie van de attributen, de tijd aan geef door middel van gekleurde bolletjes.


Code

XML

Code: Alles selecteren

<?xml version="1.0" encoding="ISO-8859-1"?>

<!--<![CDATA[
   Binary Clock
   
   Illustrating the coolness of binary digits.
   
   This simple binary clock has three rows of six circles each. The first row
   displays the time in hours, the seconds displays the minutes and the third
   displays the seconds.
   
   Each row can be read interpreted as a six-bit binary digit, as in the
   following examples:
   
      011010[2] = 0 * 2^0 + 1 * 2^1 + 0 * 2^2 + 1 * 2^3 + 1 * 2^4 + 0 * 2^5 = 26[10]
      011110[2] = 0 * 2^0 + 1 * 2^1 + 1 * 2^2 + 1 * 2^3 + 1 * 2^4 + 0 * 2^5 = 30[10]
   
   Information on the binary numeral system can be found on Wikipedia:
      http://en.wikipedia.org/wiki/Binary_numeral_system
   I have written a series of articles desribing the binary numeral system (in Dutch),
   which can be found here:
      http://www.the-forums.nl/viewtopic.php?t=3683
   
   This script is tested in the following browsers:
      * Opera 9.0
      * Internet Explorer 6.0
   
   Author: Jorn van der Pol <jorn at devvers dot nl>
]]>-->

<svg width="240" height="90" onload="initialize();">
   <script type="text/javascript">
   <![CDATA[
      // Background color, used for the background and empty circles.
      var bgColor = '#FFFFFF';
     
      // Foreground color, use for lines and filled circled.
      var fgColor = '#000000';
     
      // Names for rows of circles. The upper row is called 'hours',
      // the second row 'minutes' and the last 'seconds'.
      // The ID of each circle depends on the position of the circle.
      // The upper right circle is called 'hours_0' while the middle left
      // circle is called 'minutes_5'.
      // Note that the index corresponds with the power of two the
      // circle uses. The right most circle has value 2^0 = 1, while the
      // left most circle has value 2^5 = 32.
      var IDs = new Array( 'hours', 'minutes', 'seconds' );
     
      // Initializes the clock. Sets background and creates circles.
      function initialize()
      {
         // Get the double radius of each circle, which is 1/5 * the document's width.
         var width = document.documentElement.getAttribute( 'width' ) / 6;
         
         // Resize the document element so that it can contain all circles.
         document.documentElement.setAttribute( 'height', 3 * width );
         
         // Draw the document's background.
         var element = document.createElement( 'rect' );
         element.setAttribute( 'x', 0 );
         element.setAttribute( 'y', 0 );
         element.setAttribute( 'width', 6 * width );
         element.setAttribute( 'height', 3 * width );
         element.setAttribute( 'style', 'fill:'+bgColor+';' );
         document.documentElement.appendChild( element );
         
         // Draw the circles.
         for( var y = 1; y <= 3; y++ )
         {
            for( var x = 1; x <= 6; x++ )
            {
               var element = document.createElement( 'circle' );
               element.setAttribute( 'cx', x * width - 0.5 * width );
               element.setAttribute( 'cy', y * width - 0.5 * width );
               element.setAttribute( 'r', 0.5 * width );
               element.setAttribute( 'id', IDs[ y - 1 ] + '_' + ( 6 - x ) );
               element.setAttribute( 'style', 'fill:' + bgColor + ';stroke-width:1px;stroke:' + fgColor + ';' );
               document.documentElement.appendChild( element );
            }
         }
         
         // Run the clock.
         runClock();
      }
     
      // Run the clock. Check for each circle if it should be filled or
      // empty, depending on the current time.
      // Then calls itself with a one second interval to refresh the clock.
      function runClock()
      {
         // Get the current time and make it easily accessible within
         // the loop.
         var date = new Date();
         var time = new Array( date.getHours(), date.getMinutes(), date.getSeconds() );
         
         // Loop through every circle and decide wether it should be filled or empty.
         for( var y = 1; y <= 3; y++ )
         {
            for( var x = 1; x <= 6; x++ )
            {
               var element = document.getElementById( IDs[ y - 1 ] + '_' + ( 6 - x ) );
               
               // Perform a binary comparison on the current time and
               // 2^(6-x) to decide wether the circle should be filled
               // or not.
               var color;
               if( time[ y - 1 ] & Math.pow( 2, 6 - x ) )
                  color = fgColor;
               else
                  color = bgColor;
               
               // Set the background color (filled or empty).
               element.setAttribute( 'style', 'fill:' + color + ';stroke-width:1px;stroke:' + fgColor + ';' );
            }
         }
         
         // Refresh the clock with a one second interval.
         setTimeout( 'runClock();', 1000 );
      }
   ]]>
   </script>
</svg>

Hieronder heb ik een voorbeeld geplaatst. Voor de meeste browsers heb je een plugin nodig om SVG te kunnen bekijken. Gebruik daarvoor bijvoorbeeld deze SVG Viewer.

Klik hier voor een voorbeeld.