JSP实现简单的网页计算器

柔情只为你懂 2022-02-19 12:41 481阅读 0赞

计算器可以用纯代码编出来，但是效率比较低，本篇主要是运用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中呀

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70]: /images/20220219/d0971ac4f51d453e9de732cfc571a488.png