用JavaScript实现类似于单片机那样的跑马灯_javascript

最近因为需要这样的动图实现功能显示，在网上又找不到类似的动图，也不知道怎么做这样的动图，又刚好学了JavaScript，所以就试试能不能实现。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>paomadeng</title>
    <style type="text/css">
      body{background-color: black;}
      #paomadeng{text-align:center;vertical-align: center;margin-top: 100px; visibility: hidden; }
      #d1{margin-left: 0px;}
      #d2{margin-left: 5px;}
      #d3{margin-left: 10px;}
      #d4{margin-left: 15px;}
      #d5{margin-left: 20px;}
      #d6{margin-left: 25px;}
      #d7{margin-left: 30px;}
      #d8{margin-left: 35px;}
      #d9{margin-left: 40px;}
    </style>
  </head>
  <body onload="showPaoMaDeng()"> 
    <div id="paomadeng">

      <div id="d1">
        <img src="img/yellow.png" height="10px" width="80px"  >
      </div>
      <div id="d2">
        <img src="img/yellow.png" height="10px" width="75px">
      </div>
      <div id="d3">
        <img src="img/yellow.png" height="10px" width="70px">
      </div>
      <div id="d4">
        <img src="img/yellow.png" height="10px" width="65px">
      </div>
      <div id="d5">
        <img src="img/yellow.png" height="10px" width="60px">
      </div>
      <div id="d6">
        <img src="img/yellow.png" height="10px" width="55px">
      </div>
      <div id="d7">
        <img src="img/yellow.png" height="10px" width="50px">
      </div>
      <div id="d8">
        <img src="img/yellow.png" height="10px" width="45px">
      </div>
      <div id="d9">
        <img src="img/yellow.png" height="10px" width="40px">
      </div>
    </div>

    var myVar=setInterval(function(){showPaoMaDeng()},500);
    <script language="javascript",type="text/javascript"> 
      var i=0;
      function hiddenLight1(num1){
        switch(num1)
        {
          case 1:
            document.getElementById("d1").style.visibility="hidden";//隐藏
          break;
          case 2:
            document.getElementById("d2").style.visibility="hidden";//隐藏
          break;
          case 3:
            document.getElementById("d3").style.visibility="hidden";//隐藏
          break;
          case 4:
            document.getElementById("d4").style.visibility="hidden";//隐藏
          break;
          case 5:
            document.getElementById("d5").style.visibility="hidden";//隐藏
          break;
          case 6:
            document.getElementById("d6").style.visibility="hidden";//隐藏
          break;
          case 7:
            document.getElementById("d7").style.visibility="hidden";//隐藏
          break;
          case 8:
            document.getElementById("d8").style.visibility="hidden";//隐藏
          break;
          case 9:
            document.getElementById("d9").style.visibility="hidden";//隐藏
          break;
        }       
      };
      function showLight1(num2){        
        switch(num2)
        {
          case 1:
            document.getElementById("d1").style.visibility="visible";//显示
          break;
          case 2:
            document.getElementById("d2").style.visibility="visible";//显示
          break;
          case 3:
            document.getElementById("d3").style.visibility="visible";//显示
          break;
          case 4:
            document.getElementById("d4").style.visibility="visible";//显示
          break;
          case 5:
            document.getElementById("d5").style.visibility="visible";//显示
          break;
          case 6:
            document.getElementById("d6").style.visibility="visible";//显示
          break;
          case 7:
            document.getElementById("d7").style.visibility="visible";//显示
          break;
          case 8:
            document.getElementById("d8").style.visibility="visible";//显示
          break;
          case 9:
            document.getElementById("d9").style.visibility="visible";//显示
          break;
        }
      };
      function func(){
        i++;
        if(i<10&&i>0)
        {
          showLight1(10-i);
        }
        else if(i<19&&i>9)
        {
          hiddenLight1(19-i);
        }
        else
        {
          i=0;
        }
      };
      function showPaoMaDeng(){
        setInterval(function(){func()},100);
      };
    </script>
  </body>
</html>

当然，在HTML的同级目录下还需要新建一个文件夹img，里面放一张图片：

用JavaScript实现类似于单片机那样的跑马灯_d3_02  



完结。