js 简单计算器

迷南。 2022-06-14 03:56 247阅读 0赞

将字符串转成浮点型函数：parseFloat（"12.3"）;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div{
    width:300px;
    height:200px;
    background:#0FF;
    margin:auto;
    }
    #div1 h3{
    text-align:center;
    width:300px;
    height:30px;
    border:1px;
    text-align:center;
    background:#0CF;
    }
    #div2{
    background:#060;
    width:300px;
    height:180px;
    margin:10px 0;
    }
    #div1 #text{
    margin:-20px 0 0 65px;
    }
    #div1 #C{
    width:60px;
    height:40px;
    }
    #div2 input{
    width:65px;
    height:40px;
    margin:0 2px 3px 2px;
    font-size:18px;
    }
    </style>
    </head>
    
    
    <body>
    <div id="div">
    <div id="div1">
        <h3>计算器</h3>
          <input type="text" id="text" />
        <input type="button" id="C"  value="C" οnclick="qk()"/>
    </div>
        <div id="div2">
        <input type="button" id="btn1"  value="1" οnclick="f(1)"/>
        <input type="button" id="btn2" value="2" οnclick="f(2)"/>
         <input type="button" id="btn3" value="3" οnclick="f(3)"/>
        <input type="button" id="btn4" value="+" οnclick="ysf('+')"/>
        <input type="button" id="btn5" value="4" οnclick="f(4)"/>
        <input type="button" id="btn6" value="5" οnclick="f(5)"/>
        <input type="button" id="btn7" value="6" οnclick="f(6)"/>
        <input type="button" id="btn8" value="-" οnclick="ysf('-')"/>
        <input type="button" id="btn9" value="7" οnclick="f(7)"/>
        <input type="button" id="btn10" value="8" οnclick="f(8)"/>
    <input type="button" id="btn11" value="9" οnclick="f(9)"/>    
        <input type="button" id="btn12" value="*" οnclick="ysf('*')"/>
        <input type="button" id="btn13" value="0" οnclick="f(0)"/>
        <input type="button" id="btn14" value="." οnclick="f('.')"/>
        <input type="button" id="btn15" value="=" οnclick="ysf('=')"/>
        <input type="button" id="btn16" value="/" οnclick="ysf('/')"/>
        </div>
    </div>
    
    
    <script>
    var text = document.getElementById('text');
    var tag = false;
    var jl;
    var v1=0,v2=0,v3=0;
    function f(x)
    {
    text.value += x;
    };
    function ysf(ch){
    switch(ch){
    case '+':
    v1 = parseFloat(text.value);
    text.value="";
    jl = 1;
    break;
    case '-':
    v1 = parseFloat(text.value);
    text.value="";
    jl = 2;
    break;
    case '*':
    v1 = parseFloat(text.value);
    text.value="";
    jl= 3;
    break;
    case '/':
    v1 = parseFloat(text.value);
    text.value="";
    jl = 4;
    break;
    case '=':
    v2 = parseFloat(text.value);
    switch(jl){
    case 1:
    text.value = v1+v2;
    break;
    case 2:
    text.value = v1-v2;
    break;
    case 3:
    text.value = v1*v2;
    break;
    case 4:
    text.value = v1/v2;
    break;
    }
    break;
    }
    };
    function qk(){
    	v1 = v2 = 0.0;
    	text.value = "";
    }
    </script>
    </body>
    </html>