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

来源：互联网发布：大数据学习编辑：程序博客网时间：2024/06/09 00:27

最近刚刚接触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>

最终结果是这样的~

1 0