利用JavaScript制作计算器

2018-06-24 00:52:25来源：未知阅读 ()

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    * {
        margin: 0;
        padding:10px;
        border: 0;
    }
    #text1,#text2 {
        width:150px;
        height: 40px;
        border: 1px solid #AFAEAE;
    } 
    #div1 {
        width:400px;
        height: 80px;
        border: 1px solid #AFAEAE;
    }
    #btn1,#btn5,#btn3,#btn4 {
        height: 50px;
        width: 40px;
        background: #E39E2D;
    }
</style>
</head>

<body>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="button" id="btn1" value="加" />
<input type="button" id="btn5" value="减" />
<input type="button" id="btn3" value="乘" />
<input type="button" id="btn4" value="除" />
<br>
<br>
<div id="div1"></div>

<script type="text/javascript">
    var txt1=document.getElementById('text1');
    var txt2=document.getElementById('text2');
    var btn1=document.getElementById('btn1');
    var btn5=document.getElementById('btn5');
    var btn2=document.getElementById('btn3');
    var btn2=document.getElementById('btn4');
    var div=document.getElementById('div1');
    
    btn1.onclick=function()//加法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您输入的第一个数字有误！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您输入的第一个数字有误！';
            }
        else{
            div.innerHTML=(n1+n2);
        }  
    }
    
        btn5.onclick=function()//加法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您输入的第一个数字有误！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您输入的第一个数字有误！';
            }
        else{
            div.innerHTML=(n1-n2);
        }  
    }
    
        btn3.onclick=function()//乘法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您输入的第一个数字有误！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您输入的第一个数字有误！';
            }
        else{
            div.innerHTML=(n1*n2);
        }  
    }
        
            btn4.onclick=function()//除法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您输入的第一个数字有误！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您输入的第一个数字有误！';
            }
        else{
            div.innerHTML=(n1/n2);
        }  
    }
</script>
</body>
</html>