20行代码实现的计算器，高手勿打击俺。。。

<style>
*{margin:2px;}input{width:30px;height:30px;}
</style>
<body>
<div id="text" style="width:150px; height:40px; border:#06C 1px solid"></div>
<script>
var arr=['0','1','2','3','4','5','6','7','8','9','+','-','*','/','='];
for(var i=0,str='';i<15;i++){
if(i%4==3){str+="<input type='button' value='"+arr[i]+"'/><br>"; }
else{str+="<input type='button' value='"+arr[i]+"'/>"}
}
var text=document.getElementById("text");
document.write(str);
for(var j=0;j<15;j++){
document.getElementsByTagName("input")[j].id=j;
document.getElementsByTagName("input")[j].onclick=function(){
if(this.id==14){alert(eval(text.innerHTML));}
else text.innerHTML+=this.value;
}}
</script>
 

解决方案 »

  1.   

    <html>
    <head>
    <style>
    *{margin:2px;}input{width:30px;height:30px;}
    </style>
    <body>
    <div id="text" style="width:150px; height:40px; border:#06C 1px solid"></div>
    <script>
    var arr=['0','1','2','3','4','5','6','7','8','9','+','-','*','/','='];
    for(var i=0,str='';i<15;i++){
        if(i%4==3){str+="<input type='button' value='"+arr[i]+"'/><br>"; }
        else{str+="<input type='button' value='"+arr[i]+"'/>"}
        }
    var text=document.getElementById("text");
    document.write(str);
    for(var j=0;j<15;j++){
        document.getElementsByTagName("input")[j].id=j;
        document.getElementsByTagName("input")[j].onclick=function(){
            if(this.id==14){alert(eval(text.innerHTML));}
            else text.innerHTML+=this.value;
        }}
    </script>
    <script>
       function click1(){
         document.getElementById("text").innerHTML="";
       }
    </script>
    </head>
    <body>
      <input type="button" id="button" value="归零" onclick="click1();">
    </body>
    </html>
      

  2.   

    添加各个功能挺好添加的，在数组里面添加值，然后最后用switch判断就行了
      

  3.   

    才来csdn一周，终于看见能看懂并做得到的帖子了....
      

  4.   

    不要太信任eval()
    最好别用getElementsByTagName，用getElementsByName吧
    id在你拼装str的时候不就可以赋值了？
      

  5.   

    其实不用id也行，写个内层函数，把j转换为t变量
    不过考虑到减少代码量就那样写了不要太信任eval()，请教什么意思我知识做着玩玩，用getElementsByTagName也无妨
      

  6.   


    加入拖动功能哈哈
    <style>
    *{margin:2px;}input{width:30px;height:30px; }
    #main{position:relative;}
    </style>
    <body>
    <script>
    var arr=['0','1','2','3','4','5','6','7','8','9','+','-','*','/','(',')','ce','=','退'];
    str='<div id="main"><h4>计算机能够自由拖动，试试哦</h4><div id="text" style="width:130px; height:32px; border:#06C 1px solid;overflow:hidden"></div>';
    for(var i=0;i<arr.length;i++){
    if(i%4==3){str+="<input id='"+i+"' type='button' value='"+arr[i]+"'/><br>"; }
    else{str+="<input id='"+i+"' type='button' value='"+arr[i]+"'/>"}
    }
    document.write(str+"</div>");
    var text=document.getElementById("text");
    var input=document.getElementsByTagName("input");
    var main=document.getElementById("main");
    for(var j=0;j<arr.length;j++){
    input[j].onclick=function(){
    switch(parseInt(this.id)){
    case 16 :text.innerHTML='';break;
    case 17 :text.innerHTML=eval(text.innerHTML);break;
    case 18 :text.innerHTML=text.innerHTML.substr(0,text.innerHTML.length-1);break;
    default:text.innerHTML+=this.value;
    }
    }}
    main.onmousedown=function(e){
    e=e||event;
    mouseX=e.clientX;
    mouseY=e.clientY;
    this.objX=main.offsetLeft;
    this.objY=main.offsetTop;
    if(!document.onmousemove)
    document.onmousemove=function(e){
    e=e||event;
    var x=e.clientX-mouseX;
    main.style.left=main.objX+x+'px';
    main.style.top=main.objY+e.clientY-mouseY+'px';
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    }
    }
    </script>