利用JavaScript制作计算器

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

新老客户大回馈,云服务器低至5折

<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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue添加请求拦截器

下一篇:js实现发送验证码倒计时效果