JS小Demo实战之一个超级简单的计算器功能的实现。

时间:2022-12-29 14:25:26

最近刚刚接触Javascript发现他的DOM处理非常好玩,就试着写了一个非常简单的小计算器。

先上代码:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>事件</title>  
<script type="text/javascript">
function count(){   <span style="white-space:pre"></span>
    var txt1= document.getElementById("txt1").value;       //获取第一个输入框的值
    var txt2= document.getElementById("txt2").value;       //获取第二个输入框的值
    var operator= document.getElementById("select").value; //获取选择框的值
    var result="";
    switch(operator){                  //获取通过下拉框来选择的值来改变加减乘除的运算法则
        case'+':
            result=parseInt(txt1)+parseInt(txt2);
            break;
        case'-':
            result=parseInt(txt1)-parseInt(txt2);
            break;
        case'*':
            result=parseInt(txt1)*parseInt(txt2);
            break;
        case'/':
            result=parseInt(txt1)/parseInt(txt2);
            break;
    }
    document.getElementById("jieguo").value=result;  //设置结果输入框的值 
}
window.onload=function(){
    var Iamount=document.getElementById("amount");
    Iamount.onclick=count;
}
</script> 
</head> 
   <body>
     <input type='text' id='txt1' /> 
     <select id='select'>
    <span style="white-space:pre"></span><option value='+'>+</option>
    <span style="white-space:pre"></span><option value="-">-</option>
    <span style="white-space:pre"></span><option value="*">*</option>
    <span style="white-space:pre"></span><option value="/">/</option>
     </select>
     <input type='text' id='txt2' /> 
     <input type='button' id='amount' value=' = '/> <!--通过 = 按钮来调用创建的函数,得到结果--> 
     <input type='text' id='jieguo' />   
   </body>
</html>


最终结果是这样的~


JS小Demo实战之一个超级简单的计算器功能的实现。