计算器案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	  .panel {
        	border: 4px solid #ccc;
        	width: 202px;
        	margin: 50px auto;
  		}
  		.panel p,.panel input{
  			font-family: "黑体";
  			font-size:20px;
  			margin:5px;
  			float:left;
  		}
  		.panel p{
  			border:4px solid #ddd;
  			height:30px;
  			width:123px;
  			padding:5px;
  		}
  		.panel input{
  			height:40px;
  			width:40px;
  		}
</style>
 <script type="text/javascript">
      function cal(e) {
        var obj = e.target || e.srcElement;
        if(obj.nodeName != "INPUT") {
          return;
        }
        
        var value = obj.value;
        var screen = document.getElementById("screen");
        if(value=="C") {
          screen.innerHTML = "";
        } else if (value=="=") {
          var exp = screen.innerHTML;
          try {
            var r = eval("("+exp+")");
            screen.innerHTML = r;
          } catch(e) {
            console.log(e);
            screen.innerHTML = "Error";
          }
        } else {
          screen.innerHTML += value;
        }
      }
    </script>
</head>
<body>
	  <div class="panel" onclick="cal(event);">
		
		<div>
			
			 <p id="screen"></p>
       		 <input type="button" value="C">
        	  <div style="clear:both"></div>

		</div>
		
		<div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">
        
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">
        
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">
        
        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">
        
        <div style="clear:both"></div>
       
      </div>
		
	</div>
	
</body>
</html>
计算器 案例

猜你喜欢
