类似csdn结贴的分数显示怎么实现？

不知道CSDN怎么做但要是我就这么做在每个输入分值的input上加一个onblur事件，动态更新剩余的可用分值我觉得挺简单

解决方案 »

  1.   

    <html>
    <head>
    <script>
    var point = 100;
    function change(obj){
     var c = obj.value;
     if(c>point){
    obj.value = '';
    alert('error');
    }else{
     point -=c;
    }
    }
    </script>
    </head>
    <body>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <script>
    var point = 100;
    function change(obj){
     var c = obj.value;
     if(c>point){
    obj.value = '';
    alert('error');
    }else{
     point -=c;
    alert(obj.parentNode.nextSibling)
     obj.parentNode.nextSibling.childNodes[0].value = point;
    }
    }
    </script>
    </head>
    <body>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    <div>
    <input type=text onchange='change(this)'/>
    </div>
    </body>
    </html>
      

  3.   


    <style type="text/css">
    .ss{ border:1px; background-color:#FFCC00; width:150px; height:40px; position:absolute}
    </style>
    <body>
    <div class="ss" id='sss' ></div>
    <div id='All'>
    　　　　　　　　　　　　　<input style=" width:20px"  type="text"><br><br><br><br><br>
    　　　　　　　　　　　　　<input style=" width:20px"  type="text"><br><br><br><br><br>
    　　　　　　　　　　　　　<input style=" width:20px"  type="text"><br><br><br><br><br>
    　　　　　　　　　　　　　<input style=" width:20px"  type="text"><br><br><br><br><br>
    　　　　　　　　　　　　　<input style=" width:20px"  type="text"><br><br><br><br><br>
    　　　　　　　　　　　　　<input style=" width:20px"  type="text"><br><br><br><br><br>
    </div>
    <script>
    var fen =100;
    function $(Id){return document.getElementById(Id)};
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
    var input = $('All').getElementsByTagName('input')
    for(var i=0;i<$('All').getElementsByTagName('input').length;i++)
    {
        var v=$('All').getElementsByTagName('input')[i];
        (function(v){
        addListener($('All').getElementsByTagName('input')[i],'mouseover',function(){Score(v)});
    addListener($('All').getElementsByTagName('input')[i],'mouseout',function(){Remove(v)});
        })(v);
    }function Score(elm){
        elm.focus();elm.select() 
        var height = elm.offsetHeight;
    var width  = elm.offsetWidth;
    var left =elm.offsetLeft;
    var top  =elm.offsetTop;
    while (elm=elm.offsetParent){
    left += elm.offsetLeft;
    top  += elm.offsetTop;
    };
    Create('div',document.body,function(obj){obj.id='show';obj.className='ss';obj.style.left=left-150+width;obj.style.top=top+height;})
    $('show').innerHTML="该问题总分:100<br>现可结的分:"+fen
    }
    function Create(elm,parent,fn){
       var obj = document.createElement(elm);
       if(fn)fn(obj);
       parent.appendChild(obj);
    }
    function Remove(elm)
    {
      if($('show'))
      $('show').parentNode.removeChild($('show'))
      if(/^\d+$/.test(elm.value.toString()))
     fen=fen-elm.value
      elm.blur();
    }
    </script>
    </body>