js之简易计算器

用js实现简易计算器,附有详细代码。可以实现简单的数学算术运算,但是还是觉得里面有点小bag,接下来我会继续完善的。如果您有什么意见和建议,希望留言告诉我

html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        *{margin: 0;
            padding: 0;}
        td{width: 80px;height:80px;}
        tr:nth-child(2) td{height:50px;}
        input[type="text"]{width: 340px;height: 82px;text-align: right;
            font-size: 30px;line-height: 82px}
        input[type="button"]{width: 84px;height: 84px;text-align: center;
            font-size: 30px;line-height: 82px}
        tr:nth-child(2) input[type="button"]{width: 170px;height: 50px;text-align: center;
            font-size: 30px;line-height: 52px}

    style>
head>
<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="4"><input type="text" id="btn" value="" disabled/>td>
        tr>
        <tr>
            <td colspan="2"  height="50"><input type="button" class="btn" value="C"/>td>
            <td colspan="2" ><input type="button" class="btn" value="D"/>td>
        tr>
        <tr>
            <td><input type="button" class="btn" value="7"/>td>
            <td><input type="button" class="btn" value="8"/>td>
            <td><input type="button" class="btn" value="9"/>td>
            <td><input type="button" class="btn" value="/"/>td>
        tr>
        <tr>
            <td><input type="button" class="btn" value="4"/>td>
            <td><input type="button" class="btn" value="5"/>td>
            <td><input type="button" class="btn" value="6"/>td>
            <td><input type="button" class="btn" value="*"/>td>
        tr>
        <tr>
            <td><input type="button" class="btn" value="1"/>td>
            <td><input type="button" class="btn" value="2"/>td>
            <td><input type="button" class="btn" value="3"/>td>
            <td><input type="button" class="btn" value="-"/>td>
        tr>
        <tr>
            <td><input type="button" class="btn" value="0"/>td>
            <td><input type="button" class="btn" value="."/>td>
            <td><input type="button" class="btn" value="+"/>td>
            <td><input type="button" class="btn" value="="/>td>
        tr>
    table>
    <script>
        window.onload=function(){
            var btn =document.getElementsByClassName("btn");
            var result=document.getElementById("btn");
            var arr=[];

            for(var i=0;i<btn.length;i++){

                btn[i].onclick=function(){
                  if(!isNaN(this.value)||this.value=="."){//只能输入数字和小数点
		      
			if(result.value.indexOf(" ")==-1){
				}else
				    result.value="";
if( result. value. indexOf( ".")==- 1){//判断小数点的个数 result. value+= this. value; } else{ if( this. value!= "."){ result. value+= this. value; } } } if( this. value== "+"|| this. value== "-"|| this. value== "*"|| this. value== "/"){//将数字和运算符号存入数组中,方便运算。 arr[ arr. length]= result. value; arr[ arr. length]= this. value; result. value= ""; // console.log(arr[0]) if( arr[ arr. length- 3]== "+"|| arr[ arr. length- 3]== "-"|| arr[ arr. length- 3]== "*"|| arr[ arr. length- 3]== "/"){ arr. splice( arr. length- 3, 2) } if( arr[ 0]== ""&& arr[ 1]== "+"|| arr[ 0]== ""&& arr[ 1]== "-"|| arr[ 0]== ""&& arr[ 1]== "*"|| arr[ 0]== ""&& arr[ 1]== "/"){ arr. splice( 0, 1, "0") } } if( this. value== "="){//计算 var str= ""; arr[ arr. length]= result. value; console. log( arr); for( var a in arr){ str+= arr[ a]; } result. value= eval( str); arr=[]; } if( this. value== "C"){//清空 result. value= ""; arr=[]; } if( this. value== "D"){//删除最后一个数字 result. value= result. value. substr( 0, result. value. length- 1) } } } } script > body > html >

你可能感兴趣的:(web)