急，在线等---------------

一下是我实现的一个点击button，进度条向前移10%,现在就是我还想再下面添加几个button和进度条怎么添加，点击button不影响其他的button和进度条呢，等待大侠！<html> 
<head> 
<title>CSS直方图示例</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> <style type="text/css">
   
    .mb_msgexp li
    {
        float: left;
        line-height: 20px;
    }
    .mb_msgexp li.step
    {
        width: 225px;
        height: 32px;
        padding: 0 0 0 30px;
    }
    .mb_msgexp .percentImage
    {
        position: absolute;
        width: 192px;
        height: 18px;
        background-position: 1px 0;
        background: url(mybaihe_profile_step.gif) no-repeat 0 0;
        background-color:red;
        text-align: center;
        color: red;
        font-weight: 700;
    }
</style>
 
</head> 
<body> 
    <ul class="mb_msgexp">
        <li class="online">&nbsp;</li>
        <li>任务进度：已完成</li>
        <li id="show" class="step">
            <div class="percentImage" style="background-position: 100% 0;">
                <div class="bg"> 0%</div>     
            </div>  
        </li>   
    </ul>
      <input id="Button1" type="button" value="button" onclick="addcomple()" />
    <script type="text/javascript">
     var flag=0;
     var count=0;
      function addcomple()
      {
      
            count++;
            var r=document.getElementById("Button1");
            if(count==1)
            {
            r.value="111";
            }
            else if(count ==2)
            {
            r.value="2222";
            }
            else if(count==3)
            {
                r.value="44444";
            }
            else
            {
            r.value="333";
            }
          flag=flag+10;
          var show=document.getElementById("show");
          if(flag>=100)
          {
             show.innerHTML="<div class='percentImage' style='background-position: 0% 0;'><div class='bg'>任务完成</div></div>";
             return;
          }
          
          
          show.innerHTML="<div class='percentImage' style='background-position: "+(100-parseInt(flag))+"% 0;'><div class='bg'>"+flag+"%</div></div>";
          alert(document.getElmentById("show").innerHTML)   
      }
       
                  
    </script>    <br />
    <br />
    
</body> 
</html>

解决方案 »

  1.   

    把这个 function addcomple()函数当做对象来看，函数中的具体元素，如var r=document.getElementById("Button1");当做参数传进去，不要直接写在函数中，然后你可以new addcomple()的形式创建新的对象。
      

  2.   

    我实现的一个点击button，进度条向前移10%你可以控制有颜色div的宽度，没点击一下按钮 赋值颜色div的宽度为 原来宽度+10%下面添加几个button和进度条怎么添加，点击button不影响其他的button和进度条呢这个简单的做法就是命名上有规则就可以了。比如 but1 div1,btn2 div2,btn3 div3
      

  3.   


    <html>  
    <head>  
    <title>CSS直方图示例</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">  <style type="text/css">
        
      .mb_msgexp li
      {
      float: left;
      line-height: 20px;
      }
      .mb_msgexp li.step
      {
      width: 225px;
      height: 32px;
      padding: 0 0 0 30px;
      }
      .mb_msgexp .percentImage
      {
      position: absolute;
      width: 192px;
      height: 18px;
      background-position: 1px 0;
      background: url(mybaihe_profile_step.gif) no-repeat 0 0;
      background-color:red;
      text-align: center;
      color: red;
      font-weight: 700;
      }
    </style>
     
    </head>  
    <body>  
      <ul class="mb_msgexp">
      <li class="online">&nbsp;</li>
      <li>任务进度：已完成</li>
      <li id="show1" class="step" >
      <div class="percentImage" style="background-position: 100% 0;">
      <div class="bg"> 0%</div>   
      </div>   
      </li>   
      </ul>
      <input id="Button1" type="button" value="button"  onclick="addcomple(this,'1',0,0)" />
        <ul class="mb_msgexp">
      <li class="online">&nbsp;</li>
      <li>任务进度：已完成</li>
      <li id="show2" class="step">
      <div class="percentImage" style="background-position: 100% 0;">
      <div class="bg"> 0%</div>   
      </div>   
      </li>   
      </ul>
      <input id="Button2" type="button" value="button"  onclick="addcomple(this,'2',0,0)" />
      <script type="text/javascript">  function addcomple(_this,i,flag,count)
      {
          
      count++;
     
      var r=_this;
      if(count==1)
      {
    r.value="111";
      }
      else if(count ==2)
      {
    r.value="2222";
      }
      else if(count==3)
      {
    r.value="44444";
      }
      else
      {
    r.value="333";
      }

      flag=flag+10;
     
      var show=document.getElementById("show"+i);   if(flag>=100)
      {
      show.innerHTML="<div class='percentImage' style='background-position: 0% 0;'><div class='bg'>任务完成</div></div>";
      return;
      }

      show.innerHTML="<div class='percentImage' style='background-position: "+(100-parseInt(flag))+"% 0;'><div class='bg'>"+flag+"%</div></div>";
      alert(document.getElementById("show"+i).innerHTML);   _this.onclick=function(){addcomple(_this,i,flag,count);}
      }
        
            
      </script>  <br />
      <br />
        
    </body>  
    </html>
      

  4.   

    jol_boy
     
    怎么点一下就出现警告啊
      

  5.   

    什么警告？我这边没问题。在editplus中是好的
      

  6.   

    警告：<div class=percentImage style="background-position:90%0px">
         <div class=bg>10%</div></div>怎么回事啊jol_boy
      

  7.   

    顶可以不用frameset码，，用CSS的float
      

  8.   

     alert(document.getElmentById("show").innerHTML)   
    这句是你自己写的！
      

  9.   

    这不是警告，是提示！！！汗，楼主自己的代码都不知道啊！
    alert函数。
      

  10.   

    jol_boy你QQ多少啊，谢谢你，想认识下你
      

  11.   

    问题已解决，我想认识下jol_boy兄