MaSTech - HP from Markus Stegmaier

Binäruhr

Uhr

Diese Uhr stellt die aktuelle Zeit durch Radiobuttons binär dar. Wenn Du sie auf Deiner Homepage stehen hast, kannst Du Dich bei jedem Besuch über die staunenden Fragen Deiner Mitmenschen freuen. Du wirst aber damit leben müssen, dass die Funktionsweise nur wenige verstehen... Es kann halt nicht jeder ein echter Geek sein ;)

Um den Code zu verstehen, musst du folgendes wissen: Jede Spalte repräsentiert eine Ziffer der Uhrzeit, wobei die Zahl binär dargestellt wird. D.h., der untere Radiobutton repräsentiert die 1, der zweite die 2, der dritte die 4 und der oberste die 8. Um die entsprechende Ziffer zu bekommen, musst Du dann einfach alle aktiven Radiobuttons einer Spalte addieren. Zusätzlich kannst Du bei dieser neuen Edition auch auf einen "echten" Binärbetrieb umstellen, wobei dann die unteren drei Zeilen für Sekunden, Minuten und Stunden stehen. (Auf dem Bild ist die Uhrzeit z.B. 16:42:38)

						8
						4
						2
						1
1	6	4	2	3	8

Quelltext:


<?php
REQUIRE("../header.php");
//REQUIRE('../javascript/rightmouse.js');
?>
<BODY  topmargin="0" leftmargin="0">
<div align="center">
<table topmargin="0" leftmargin="0" WIDTH="95%" BORDER="0">
   <tr>
      <td>
         <h3>Binäruhr</h3>
      </td>
   </tr>
   <tr>
      <td >
         <div align="justify">
<!--Eigentlicher Inhalt-->
<fieldset>
  <legend>Uhr</legend>
    <FORM id="binclock" action="" name="formular">
    <TABLE BORDER="0" align="center">
    <TR>
        <TD>&nbsp;</TD>
        <TD><input type="radio" class="radiobutton" id="led13" /></TD>
        <TD>&nbsp;</TD>
        <TD><input type="radio" class="radiobutton" id="led33" /></TD>
        <TD>&nbsp;</TD>
        <TD><input type="radio" class="radiobutton" id="led53" /></TD>
    </TR>
    <TR>
        <TD>&nbsp;</TD>
        <TD><input type="radio" class="radiobutton" id="led12" /></TD>
        <TD><input type="radio" class="radiobutton" id="led22" /></TD>
        <TD><input type="radio" class="radiobutton" id="led32" /></TD>
        <TD><input type="radio" class="radiobutton" id="led42" /></TD>
        <TD><input type="radio" class="radiobutton" id="led52" /></TD>
    </TR>
    <TR>
        <TD><input type="radio" class="radiobutton" id="led01"/></TD>
        <TD><input type="radio" class="radiobutton" id="led11" /></TD>
        <TD><input type="radio" class="radiobutton" id="led21" /></TD>
        <TD><input type="radio" class="radiobutton" id="led31" /></TD>
        <TD><input type="radio" class="radiobutton" id="led41" /></TD>
        <TD><input type="radio" class="radiobutton" id="led51" /></TD>
    </TR>
    <TR>
        <TD><input type="radio" class="radiobutton" id="led00" /></TD>
        <TD><input type="radio" class="radiobutton" id="led10" /></TD>
        <TD><input type="radio" class="radiobutton" id="led20" /></TD>
        <TD><input type="radio" class="radiobutton" id="led30" /></TD>
        <TD><input type="radio" class="radiobutton" id="led40" /></TD>
        <TD><input type="radio" class="radiobutton" id="led50" /></TD>
    </TR>
    </TABLE>
    </form>
</fieldset>
<p>
<table width="95%">
<tr>
<td>
<div align="justify">
Diese Uhr stellt die aktuelle Zeit durch Radiobuttons binär dar. 
Wenn Du sie auf Deiner Homepage stehen hast, kannst Du Dich bei 
jedem Besuch über die staunenden Fragen Deiner Mitmenschen freuen. 
Du wirst aber damit leben müssen, dass die Funktionsweise nur 
wenige verstehen... Es kann halt nicht jeder ein echter Geek sein ;) 
</div>
</p>
<p>
<div align="justify">
Um den Code zu verstehen, musst du folgendes wissen:
Jede Spalte repräsentiert eine Ziffer der Uhrzeit, 
wobei die Zahl binär dargestellt wird. D.h., der
untere Radiobutton repräsentiert die 1, der zweite die 2, 
der dritte die 4 und der oberste die 8. Um die 
entsprechende Ziffer zu bekommen, musst Du dann einfach alle 
aktiven Radiobuttons einer Spalte addieren. Zusätzlich kannst 
Du bei dieser neuen Edition auch auf einen "echten" Binärbetrieb 
umstellen, wobei dann die unteren drei Zeilen für Sekunden, 
Minuten und Stunden stehen. 
(Auf dem Bild ist die Uhrzeit z.B. 16:42:38)
</div>
</td>
</tr>
</table>
</p>
<TABLE>
<TR>
    <TD>&nbsp;</TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD>&nbsp;</TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD>&nbsp;</TD>
    <TD><input type="radio" class="radiobutton"checked></TD>
    <TD>8</TD>
</TR>
<TR>
    <TD>&nbsp;</TD>
    <TD><input type="radio" class="radiobutton" checked></TD>
    <TD><input type="radio" class="radiobutton" checked></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD>4</TD>
</TR>
<TR>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD><input type="radio" class="radiobutton" checked></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD><input type="radio" class="radiobutton" checked></TD>
    <TD><input type="radio" class="radiobutton" checked></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD>2</TD>
</TR>
<TR>
    <TD><input type="radio" class="radiobutton" checked></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD><input type="radio" class="radiobutton" checked></TD>
    <TD><input type="radio" class="radiobutton"></TD>
    <TD>1</TD>
</TR>
<TR>
    <TD align="center">1</TD>
    <TD align="center">6</TD>
    <TD align="center">4</TD>
    <TD align="center">2</TD>
    <TD align="center">3</TD>
    <TD align="center">8</TD>
    <TD align="center">&nbsp;</TD>
</TR>
</TABLE>

<!--*****************************-->
<!--JavaScript
<!--*****************************-->
<script type="text/javascript">

function display(number, column){
  
  led3 = Math.floor(number / 8);
  led2 = Math.floor((number % 8) / 4);
  led1 = Math.floor((number % 4) / 2);
  led0 = Math.floor(number % 2);

  if (column == 0)
    end = 2;
  else if (column % 2 != 0)
    end = 4;
  else
    end = 3;

  for (i = 0; i < end; i++){
    if (eval ("led"+i))
      document.getElementById("led" + column + i).checked = true;
    else
      document.getElementById("led" + column + i).checked = false;
  }
 
}

function clock(){
  var  time = new Date();
  
  var  hrs = time.getHours();
  display(Math.floor(hrs/10),0);
  display(hrs%10,1);
  
  var  min = time.getMinutes();
  display(Math.floor(min/10),2);
  display(min%10,3);

  var sec = time.getSeconds();
  display(Math.floor(sec/10),4);
  display(sec%10,5);

  setTimeout("clock()",1000);
}

clock();

</script>

<!--*****************************-->
<!--Quellcode anzeigen-->
<br><br>
<hr size="1" color="black">
<h4>Quelltext:</h4>
<?
show_source("index.php")
?>
<!--*****************************-->
<!--Inhalt Ende-->
         </div>
      </td>
   </tr>
   <tr align="right">
      <td><b>&nbsp;</b></td>
   </tr>
   <tr align="right">
      <td><b>Bis Bald<br>Markus</b></td>
   </tr>
   <tr align="right">
      <td><b>&nbsp;</b></td>
   </tr>
</table>
<div>
<?php
require("../footer.php");

?>

Bis Bald
Markus