js版的计算器小例子

简易JS计算器

最新推荐文章于 2019-12-21 17:11:46 发布

最新推荐文章于 2019-12-21 17:11:46 发布 · 150 阅读

文章标签：

#js #计算器 #ViewUI

js 专栏收录该内容

0 篇文章

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <script type="text/javascript">
     function setNewNum(num){
     	var input = document.getElementById("input").getAttribute("value");
     	if(num == "c"){
     		input = "";
     	}else if(num == "del"){
     		input = input.slice(0,input.length-1);
     	}else{
     	    input = input+num;
     	}	
     	document.getElementById("input").setAttribute("value", input);
     }
     
     function getResult(){
     	var input = document.getElementById("input").getAttribute("value");
     	var re,r;
     	var reg = /\+|-|\*|\\/;
     	r = input.match(reg);
     	var a = input.split(r);
     	var first = Number(a[0]);
     	var second = Number(a[1]);
     	var result;
     	var sw = String(r);  	
     	switch(sw){
     		case "-":
     			result = first-second;
     			break;
     		case "+":
     			result = first+second;
     			break;
     		case "*":
     		 	result = first*second;
     		 	break;
     	    case "\\":
     	        result = first/second;
     	        break;     		 		
     		default:
     		    alert("addd");	
     	}
     	document.getElementById("input").setAttribute("value", result);
     }   
    </script>  
    <title>myCal</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	.style1{
		width: 40;
		color: blue;
	}	
	.style2{
		text-align: right;
	}
	
	</style>

  </head>
  
  <body>
  <center>
  	<form action="MyCal.jsp" method="post">
  		<input id="input" class="style2" name="input" type="text" value="" readonly="readonly"><br/>
  		<input class="style1" name="c" type="button" value="c" onclick="setNewNum('c')"><input class="style1" name="del" type="button" value="del" onclick="setNewNum('del')"><input class="style1" name="chu" type="button" value="/" onclick="setNewNum('\\')"><input class="style1" name="cheng" type="button" value="*" onclick="setNewNum('*')"><br/>
  		<input class="style1" name="btn1" type="button" value="1" onclick="setNewNum(1)"><input class="style1" name="btn2" type="button" value="2" onclick="setNewNum(2)"><input class="style1" name="btn3" type="button" value="3" onclick="setNewNum(3)"><input class="style1" name="jian" type="button" value="-" onclick="setNewNum('-')"><br/>
  		<input class="style1" name="btn4" type="button" value="4" onclick="setNewNum(4)"><input class="style1" name="btn5" type="button" value="5" onclick="setNewNum(5)"><input class="style1" name="btn6" type="button" value="6" onclick="setNewNum(6)"><input class="style1" name="jia" type="button" value="+"  onclick="setNewNum('+')"><br/>
  		<input class="style1" name="btn7" type="button" value="7" onclick="setNewNum(7)"><input class="style1" name="btn8" type="button" value="8" onclick="setNewNum(8)"><input class="style1" name="btn9" type="button" value="9" onclick="setNewNum(9)"><input class="style1" name="equal" type="button" value="=" onclick="getResult()"><br/>
  		
  	</form>
   </center> 
  </body>
</html>

非常简单的一个js计算器的小例子，只用到了js+html+css，所以功能很局限，只能简单的一次四则运算，还不支持异常判断！

闲话不多说，贴出代码供大家赏评！