JSP实现简单的网页计算器

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

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

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

html文件：

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

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

  1. function Calc(){ 
  2.     var anExpression=Expression.value 
  3.     Result.value=eval(anExpression);
  4. }

css文件：

  1. @CHARSET "UTF-8";
  2. .container{ 
  3.      text-align: center; /*让div内部文字居中*/
  4.      background-color: #fff;
  5.     border-radius: 20px;
  6.     width: 400px;
  7.     height: 400px;
  8.     margin: auto;
  9.     position: absolute;
  10.     top: 0;
  11.     left: 0;
  12.     right: 0;
  13.     bottom: 0;
  15. }
  16. .txt{ 
  17.     border-right: #ffffff 0px solid;
  18.     border-top: #ffffff 0px solid;
  19.     font-size: 9pt; 
  20.     border-left: #ffffff 0px solid;
  21.     border-bottom: #c0c0c0 1px solid;
  22.     background-color: #ffffff
  23. }
  24. .card{ 
  25. padding: 10px;
  27. }
  28. .wz{ 
  29.   color: #f09c67;
  30.   font-size: 1.5em;
  31.   font-weight:bold;
  32. }
  33. .button1{ 
  34. border:1px solid #d2a000;
  35. box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
  36. background: -webkit-linear-gradient(top,#fece34,#d8a605);
  37. background: -moz-linear-gradient(top,#fece34,#d8a605);
  38. background: linear-gradient(top,#fece34,#d8a605);
  39. margin:20px;
  40. border-radius: 10px;
  41. width:50px;
  42. height:30px;
  43. }
  44. .button1:hover{ /*鼠标悬停 按钮会变大*/
  45. border:1px solid #d2a000;
  46. box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
  47. background: -webkit-linear-gradient(top,#fece34,#d8a605);
  48. background: -moz-linear-gradient(top,#fece34,#d8a605);
  49. background: linear-gradient(top,#fece34,#d8a605);
  50. margin:20px;
  51. transform: scale(1.4);
  52. border-radius: 10px;
  53. }
  54. .author{ 
  55.     margin-top:120px;
  56. }
  57. .author img{ 
  58.   width: 20px;
  59.   border-radius: 10px;
  60.   vertical-align: middle;
  61.   margin-left: 10px;
  62.   margin-top: -5px;
  63. }
  65. .author span{ 
  66.   color: #3d8cb9;
  67.   font-size: 0.8em;
  68.   font-weight:bold;
  69.   margin-top:100px;
  70. }

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

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

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

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，575人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JS实现简易网页计算器

    js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。 一、实现功能 1. 完成计算器的加减乘除的基本计算功能

    女爷i女爷i/ 0 赞/ 416 阅读

    相关 JSP 简单的计算器

    要求： 2、编写一个类实现加、减、乘、除、取余 计算，在JSP页面中完成如下功能： （1）输入两个操作数，选择运算符号，提交数据； （2）接收数据，进行运算，将运算结

    墨蓝墨蓝/ 0 赞/ 448 阅读