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

最新推荐文章于 2023-02-08 13:21:13 发布

杨小事er

最新推荐文章于 2023-02-08 13:21:13 发布

阅读量4.5k

点赞数 1

分类专栏： JS实例

本文链接：https://blog.csdn.net/qq_25936689/article/details/46673601

版权

JS实例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近刚刚接触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.οnlοad=function(){
    var Iamount=document.getElementById("amount");
    Iamount.οnclick=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>

最终结果是这样的~