JSP实现简单的网页计算器

计算器可以用纯代码编出来，但是效率比较低，本篇主要是运用jsp内部函数Eval（）实现计算功能，该函数可以将字符型表达式进行求值。

jsp文件和css样式表文件一样，可以直接写在html里面，也可以外部调用，我比较喜欢前一种，这样会比较清晰。

html文件：

<body bgcolor="#ff9668">
	  <div class="container">
		    <div class="card">
				<div class="cal">
					<p class="wz"> 请输入表达式：</p><br>
					<input id="Expression" type="text"  placeholder="例如：5*2+3"/><br>
	  				<input class="button1" type="button" value="=" onclick="Calc();"><br>
	   				<input id="Result" type="text" />
				</div>
			</div>
			<div class="author">
			<img src="img/sher.jpg "alt="">
			<span>Leonadoice</span>
			</div>
		</div>
  </body>

jsp文件：没错，就是这么短短3行代码就实现了±*/%等多种计算。

function Calc(){
	var anExpression=Expression.value 
	Result.value=eval(anExpression);
}

css文件：

@CHARSET "UTF-8";
.container{
	 text-align: center; /*让div内部文字居中*/
	 background-color: #fff;
    border-radius: 20px;
    width: 400px;
    height: 400px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 
}
.txt{
    border-right: #ffffff 0px solid;
    border-top: #ffffff 0px solid;
    font-size: 9pt; 
    border-left: #ffffff 0px solid;
    border-bottom: #c0c0c0 1px solid;
    background-color: #ffffff
}
.card{
padding: 10px;

}
.wz{
  color: #f09c67;
  font-size: 1.5em;
  font-weight:bold;
}
.button1{
border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
margin:20px;
border-radius: 10px;
width:50px;
height:30px;
}
.button1:hover{/*鼠标悬停 按钮会变大*/
border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
margin:20px;
transform: scale(1.4);
border-radius: 10px;
}
.author{
	margin-top:120px;
}
.author img{
  width: 20px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: -5px;
}

.author span{
  color: #3d8cb9;
  font-size: 0.8em;
  font-weight:bold;
  margin-top:100px;
}

当然，最后不要忘记把css和jsp文件链接到html中呀

<script src="index.jsp"></script>
<link rel="stylesheet" href="mycalculator.css">

最终实现效果如下：
我真的超喜欢设计这种简洁又好看的界面呀，嘻嘻~

JSP实现简单的网页计算器

猜你喜欢