[散分] 眼见为实？

best viewed from 5 feet away, try it.

解决方案 »

  1.   

    <!-- Let it Move -->
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Eye Opener</title>
    <style>
    body{background-color:black;color:white;font-family:verdana;font-size:9pt;}
    .s{border:1 solid #ccc;border-collapse:collapse;margin:-1 0 0 0}
    .s td{width:32px;height:32px;border:0}
    .bl{background-color:white}
    .wt{background-color:black}
    .show{background-color:#333}
    </style>
    <script language="JavaScript">
    <!--
    var MAX=15, MIN=-15, STEP = 1;
    var show = true;
    var arr = null;
    var timer=null;
    function makeTable(){
      var d = 10, k=0;
      for(var i=0;i<8;i++){
        var t = document.createElement("TABLE");
        t.cellSpacing = t.cellPadding = 0; 
        t.className = "s";
        var r = t.insertRow();
        for(var j=0; j<16; j++){
          var c = r.insertCell();
          c.innerText=" ";
          c.className = (j%2==0) ? "bl" : "wt";
        }
        t.style.marginLeft = k;
        dis.appendChild(t);
        if((k+d)<MIN || (k+d)>MAX) d*=-1;
        k = k+d; 
      }
    }
    function showMe(){
      var td = dis.getElementsByTagName("TD");
      for(var i=0;i<td.length;i++)
        if((td[i].cellIndex % 2)==0) 
          td[i].className = show ? "show" :"bl" ;
      show = !show;
    }
    function doMove(){
      var t = dis.getElementsByTagName("TABLE");
      if(arr==null){
        arr = new Array();
        for(var i=0;i<t.length; i++)
          arr[i] = (i%2==0)? 1 : -1;
      }
      for(var i=0;i <8; i++){
        var d = parseInt(t[i].style.marginLeft);
        if((d + arr[i]*STEP)>MAX || (d + arr[i]*STEP)<MIN) arr[i] *=-1;
        t[i].style.marginLeft = "" + (d + arr[i]*STEP) +"px";
      }
    }
    function moveHandler(){
      timer = setInterval('doMove()',400);
      btnMove.disabled = true;
      btnStop.disabled = false;
    }
    function stopHandler(){
      clearInterval(timer);
      btnMove.disabled = false;
      btnStop.disabled = true;
    }
    window.onload = makeTable;
    //-->
    </script>
    </head>
    <body>
    <h1>Eye Opener</h1>
    <p>Do you believe your eyes?  &nbsp;<button onclick="showMe()" title="show me the truth">Show Me</button> &nbsp;
    <button onclick="moveHandler()" id=btnMove title="move it">Move</button>&nbsp;
    <button onclick="stopHandler()" id=btnStop disabled title="stop move">Stop</button></p><div id=dis style="margin-left:50px" title="are these lines horizontal?">
    </div>
    <hr>
    <ADDRESS>created by <a href="mailto:[email protected]">onestab</a></ADDRESS>
    </body>
    </html>