JavaScript简单的计算器实现

nbjjy · 发表于 2013-9-7 07:54:35

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>计算器</title>
<meta http-equiv="Content-Type" content="textml; charset=gb2312" />
<style type="text/css">
      body {
         margin: 0px auto;
         padding: 0px;
      }
      #content {
         padding: 0px;
         margin: 0px auto;
         width: 240px;
         height: 300px;
      }
      .x_text {
         height: 60px;
         width: 220px;
      }
      .x_txtTime {
         height: 30px;
         width: 220px;
      }
      .x_button {
         width: 40px;
         height: 40px;
      }
      .y_button {
         width: 85px;
         height: 40px;
      }
      .z_button {
         width: 40px;
         height: 85px;
      }
      .x_table {
         border: 3px #DCDCDC solid;
      }
</style>
</head>
<body>
<div id="content">
      <form action="#" method="post" name="myForm">
         <table class="x_table">
            <tr>
                  <td colspan="5">
                     <input type="text" id="result" name="result" value="" class="x_text" /></td>
            </tr>
            <tr>
                  <td>
                     <input type="button" name="clear" value="←" class="x_button" /></td>
                  <td>
                     <input type="button" name="ce" value="CE" class="x_button" /></td>
                  <td>
                     <input type="button" name="c" value="C" class="x_button" /></td>
                  <td>
                     <input type="button" name="sprt" value="√" class="x_button" /></td>
                  <td>
                     <input type="button" name="add" value="±" class="x_button" /></td>
            </tr>
            <tr>
                  <td>
                     <input type="button" name="seven" value="7" class="x_button" /></td>
                  <td>
                     <input type="button" name="eight" value="8" class="x_button" /></td>
                  <td>
                     <input type="button" name="nine" value="9" class="x_button" /></td>
                  <td>
                     <input type="button" name="int/" value="/" class="x_button" /></td>
                  <td>
                     <input type="button" name="int%" value="%" class="x_button" /></td>
            </tr>
            <tr>
                  <td>
                     <input type="button" name="four" value="4" class="x_button" /></td>
                  <td>
                     <input type="button" name="five" value="5" class="x_button" /></td>
                  <td>
                     <input type="button" name="six" value="6" class="x_button" /></td>
                  <td>
                     <input type="button" name="int*" value="*" class="x_button" /></td>
                  <td>
                     <input type="button" name="sprt" value="^" class="x_button" /></td>
            </tr>
            <tr>
                  <td>
                     <input type="button" name="one" value="1" class="x_button" /></td>
                  <td>
                     <input type="button" name="two" value="2" class="x_button" /></td>
                  <td>
                     <input type="button" name="three" value="3" class="x_button" /></td>
                  <td>
                     <input type="button" name="int-" value="-" class="x_button" /></td>
                  <td rowspan="2">
                     <input type="button" name="int=" value="=" class="z_button" /></td>
            </tr>
            <tr>
                  <td colspan="2">
                     <input type="button" name="zero" value="0" class="y_button" /></td>
                  <td>
                     <input type="button" name="int." value="." class="x_button" /></td>
                  <td>
                     <input type="button" name="int+" value="+" class="x_button" /></td>
            </tr>
            <tr>
                  <td colspan="5">
                     <input type="text" id="txtTime" name="txtTime" value="" class="x_txtTime" /></td>
            </tr>
         </table>
      </form>
</div>
<script type="text/javascript">
      var strvalue = "";
      var firstnum;
      var caletype;
      function btnOper(calevalue) {
         if (calevalue == "+" || calevalue == "-" || calevalue == "*" || calevalue == "/" || calevalue == "%" || calevalue == "sprt") {
            document.getElementById("result").value = "";
            firstnum = strvalue;
            strvalue = "";
            caletype = calevalue;
         }
         else if (calevalue == "=") {
            switch (caletype) {
                  case "+":
                     document.getElementById("result").value = parseFloat(firstnum) + parseFloat(strvalue);
                     break;
                  case "-":
                     document.getElementById("result").value = parseFloat(firstnum) - parseFloat(strvalue);
                     break;
                  case "*":
                     document.getElementById("result").value = parseFloat(firstnum) * parseFloat(strvalue);
                     break;
                  case "/":
                     document.getElementById("result").value = parseFloat(firstnum) / parseFloat(strvalue);
                     break;
                  case "%":
                     document.getElementById("result").value = parseFloat(firstnum) % parseFloat(strvalue);
                     break;
                  case "sprt":
                     document.getElementById("result").value = Math.pow(parseFloat(firstnum), parseFloat(strvalue));
                     break;
                  default:
                     document.getElementById("result").value = "";
                     break;
            }
            strvalue = parseFloat(document.getElementById("result").value);
         }
         else if (calevalue == "C") {
            firstnum = "";
            strvalue = "";
            document.getElementById("result").value = "0";
         }
         else if (calevalue == "CE") {
            firstnum = "";
            strvalue = "";
            document.getElementById("result").value = "0";
         }
         else if (calevalue == "clear") {
            strvalue = strvalue.substring(0, strvalue.length - 1);
            document.getElementById("result").value = strvalue;
         }
         else if (calevalue == "√") {
            firstnum = "";
            strvalue = "";
            document.getElementById("result").value = Math.sqrt(parseFloat(document.getElementById("result").value));
         }
         else if (calevalue == "add") {
            firstnum = "";
            strvalue = "";
            document.getElementById("result").value = 0 - parseFloat(document.getElementById("result").value);
         }
         else {
            strvalue += calevalue;
            document.getElementById("result").value = strvalue;
         }
      }
      function showTime() {
         //创建Date对象
         var myDate = new Date();
         //获取年月日
         var year = myDate.getFullYear();
         var month = myDate.getMonth();
         var date = myDate.getDate(); //日
         //获取时分秒
         var hour = myDate.getHours();
         var minute = myDate.getMinutes();
         var second = myDate.getSeconds();
         //获取星期几
         var day = myDate.getDay();//0~6
         var result = year + "年" + convertNum(month + 1) + "月" + convertNum(date) + "日 ";
         result += convertNum(hour) + ":" + convertNum(minute) + ":" + convertNum(second) + " ";
         result += convertDay(day);
         document.getElementById("txtTime").value = result;
         setTimeout('showTime()', 1000);
      }
      function convertNum(num) {
         if (num < 10) {
            return "0" + num;
         } else {
            return num;
         }
      }
      function convertDay(day) {
         var result;
         switch (day) {
            case 0:
                  result = "星期日";
                  break;
            case 1:
                  result = "星期一";
                  break;
            case 2:
                  result = "星期二";
                  break;
            case 3:
                  result = "星期三";
                  break;
            case 4:
                  result = "星期四";
                  break;
            case 5:
                  result = "星期五";
                  break;
            case 6:
                  result = "星期六";
                  break;
         }
         return result;
      }
</script>
</body>
</html>

		自动登录	找回密码
密码			注册 (请使用非IE浏览器)