当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

js版的计算器小例子

发表于: 2014-06-28   作者:冰上王国   来源:转载   浏览次数:
摘要: <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+":
<%@ 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,所以功能很局限,只能简单的一次四则运算,还不支持异常判断!

 

闲话不多说,贴出代码供大家赏评!

 

js版的计算器小例子

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
<html> <head> <script language="javascript"> <!-- 检查某一项是否存在--&g
项目文件布局: web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app version
java做的计算器小程序:截图 功能键: MC键:清除存储器中数据 CE键:清除当前显示的数据 C键:清除
1. 制作该计算器使用了一个2个类,一个显示类(Accu),一个监听类(AccuListener) 2. 该类定义了1个
【约定胜于配置】 1. 右键Mode数据层添加新建项,用linq连接数据库   (不要在控制层上直接操控lin
1.首页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF
http://binfenghu.blog.163.com/blog/static/202820029201272124149479/ 1.在D盘建一个temp文件夹,
一:你可学到 手机内依据Uri查看联系人 权限的添加 获取手机内任意一款应用的应用图标 对图形的处理
frame-by-frame animation 是一个展示一连串图片的简单的动画 实现frame-by-frame animation 的步骤
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号