请问如何用javascript实现 像手机信号量的那个UI？

请各位老大给点提示
就像那种有短中长三种长度的长条，根据信号大小，来确定显示多少条谢谢

解决方案 »

  1.   

    请问各位有没有例子啥的我看看？
    我更倾向于用 CSS画条子谢谢
      

  2.   


    <style>
    li.s05 {background:url(img/signal.gif) no-repeat; background-position: 0px 0px; display:block; width:80px; height:22px; list-style:none;}
    li.s04 {background:url(img/signal.gif) no-repeat; background-position: 0px -22px; display:block; width:80px; height:22px; list-style:none;}
    li.s03 {background:url(img/signal.gif) no-repeat; background-position: 0px -44px; display:block; width:80px; height:22px; list-style:none;}
    li.s02 {background:url(img/signal.gif) no-repeat; background-position: 0px -66px; display:block; width:80px; height:22px; list-style:none;}
    li.s01 {background:url(img/signal.gif) no-repeat; background-position: 0px -88px; display:block; width:80px; height:22px; list-style:none;}</style><li class="s05"></li>
    <li class="s04"></li>
    <li class="s03"></li>
    <li class="s02"></li>
    <li class="s01"></li>
      

  3.   


    <style>
    li.s05 {background:url(http://i43.tinypic.com/73kks0.gif) no-repeat; background-position: 0px 0px; display:block; width:80px; height:22px; list-style:none;}
    li.s04 {background:url(http://i43.tinypic.com/73kks0.gif) no-repeat; background-position: 0px -22px; display:block; width:80px; height:22px; list-style:none;}
    li.s03 {background:url(http://i43.tinypic.com/73kks0.gif) no-repeat; background-position: 0px -44px; display:block; width:80px; height:22px; list-style:none;}
    li.s02 {background:url(http://i43.tinypic.com/73kks0.gif) no-repeat; background-position: 0px -66px; display:block; width:80px; height:22px; list-style:none;}
    li.s01 {background:url(http://i43.tinypic.com/73kks0.gif) no-repeat; background-position: 0px -88px; display:block; width:80px; height:22px; list-style:none;}</style><li class="s05"></li>
    <li class="s04"></li>
    <li class="s03"></li>
    <li class="s02"></li>
    <li class="s01"></li>
      

  4.   


    <body>
    <style>
    ul{margin:0;padding:0;}
    li {list-style:none;margin:0 2px;width:4px;border:1px #ddd solid;display:block;float:left;font-size:1px;}
    li.v1{height:6px;margin-top:8px}
    li.v2{height:8px;margin-top:6px}
    li.v3{height:10px;margin-top:4px}
    li.v4{height:12px;margin-top:2px}
    li.v5{height:14px;margin-top:0}
    </style>
    <ul id=Value>
    <li class=v1></li>
    <li class=v2></li>
    <li class=v3></li>
    <li class=v4></li>
    <li class=v5></li>
    </ul>
    <br>
    <input type=button value=- onclick=addV(-1)>
    <input type=button value=+ onclick=addV(1)>
    <script language="javascript">
    <!--
    var v=2
    function addV(k){
    v+=k
    var obj=document.getElementById("Value").getElementsByTagName("li")
    for(var i=0;i<obj.length;i++){
    if (i<=v)obj[i].style.background="#0bb"
    else obj[i].style.background="#fff"
    }
    }
    onload=function(){addV(0)}
    //-->
    </script>
    </body>
      

  5.   

    用TABLE也行,
    td{
    height:10px
    }
    .bg{
    backcolor=blue
    }
    <table>
    <tr>
    <td ></td><td></td><td></td><td class='bg'></td>
    </tr>
    <tr>
    <td></td><td></td><td class='bg'></td><td class='bg'></td>
    </tr>
    <tr>
    <td></td><td class='bg'></td><td class='bg'></td><td class='bg'></td>
    </tr>
    <tr>
    <td class='bg'></td><td class='bg'></td><td class='bg'></td><td class='bg'></td>
    </tr>
    </table>