【程序】[Vue] Web计算器——通过Vue 少量代码快速开发

待我称王封你为后i 2023-10-03 08:46 3阅读 0赞

### 一、 实验题目 ###

数学计算器

### 二、实验内容 ###

数学计算器  
编写一个数学计算器程序，可以进行基本的加减乘除运算和三角函数运算，可以直接调用部分常用的数学常数如PI和e，可以进行开平方根运算。

### 三、完成的工作 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Calculator</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <link rel="stylesheet" href="calculator.css">
    </head>
    <body>
      <h2>NBU 计算器</h2>
      <div class="center">
        <form action="##" id="cal_form">
          <input type="text" id="display" v-model='text'>
          <span id="buttons" v-for="(ele, index) in vforList" :key="index">  
            <input type="button" class = 'btn number' v-if="!(index%4===3)" :value='ele' @click='get(ele)'>
            <input type="button" class="btn operator" v-if="index%4===3" :value='ele' @click='get(ele)' >
            <br v-if="index%4===3">
          </span>
          <input type="button" id="clear" class="btn other" value="C" @click='clear'>
          <input type="button" class="btn other" value="sqrt" @click="sqrt">
          <input type="button" class="btn other" value="=" @click="calculates">
          </form>
      </div>
    
      <script>
        
        var cal = new Vue({
          
          el: '#cal_form',
          data: {
          
            text: '',
            Pi: 3.14159,
            E: 2.71828,
            vforList:[7,8,9,'+',4,5,6,'*',1,2,3,'-',0,'Pi','E','.','/'],
          },
          methods: {
          
            clear: function () {
          
              console.log("clear function called ")
              this.text = ''
            },
            get: function (value) {
          
              console.log('this value =' + value)
              if (value==='Pi') {
          
                this.text += this.Pi;
              }else if(value === 'E'){
          
                this.text += this.E;
              }else {
          this.text += value}
            },
            calculates: function () {
          
              console.log('before:' + this.text)
              this.text = eval(this.text).toFixed(2)
              console.log("after:" + this.text)
            },
            sqrt: function () {
          
              console.log('before:' + this.text)
              this.text = Math.sqrt(eval(this.text))
              console.log("after:" + this.text)
            },
          }
        })
      </script>
    </body>
    </html>

CSS : 来源 菜鸟教程 HTML CSS, JavaScript 计算器 | 菜鸟工具 (runoob.com)

将css和html代码分开可方便开发和修改，在界面需要修改的时候只需修改css文件而不需要更改html，实现组件独立。

/* Basic Reset */
    * {
        
      border: none;
      font-family: 'Open Sans', sans-serif;
      margin: 0;
      padding: 0;
    }
    
    .center {
        
      background-color: #fff;
      border-radius: 50%;
      height: 600px;
      margin: auto;
      width: 600px;
    }
    h2 {
        
      color: #495678;
      font-size: 30px;  
      margin-top: 20px;
      padding-top: 50px;
      display: block;
      text-align: center;
      text-decoration: none;
    }
    a {
        
      color: #495678;
      font-size: 30px;  
      display: block;
      text-align: center;
      text-decoration: none;
      padding-top: 20px;
    }
    form {
        
      background-color: #495678;
      box-shadow: 4px 4px #3d4a65;
      margin: 40px auto;
      padding: 40px 0 30px 40px;  
      width: 280px;
    }
    .btn {
        
      outline: none;
      cursor: pointer;
      font-size: 20px;
      height: 45px;
      margin: 5px 0 5px 10px;
      width: 45px;
    }
    .btn:first-child {
        
      margin: 5px 0 5px 10px;
    }
    .btn, #display, form {
        
      border-radius: 25px;
    }
    #display {
        
      outline: none;
      background-color: #98d1dc;
      box-shadow: inset 6px 6px 0px #3facc0;
      color: #dededc;
      font-size: 20px;
      height: 47px;
      text-align: right;
      width: 165px;
      padding-right: 10px;
      margin-left: 10px;
    }
    .number {
        
      background-color: #72778b;
      box-shadow: 0 5px #5f6680;
      color: #dededc;
    }
    .number:active {
        
      box-shadow: 0 2px #5f6680;
        -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
        -moz-tranform: translateY(2px);
        transform: translateY(2px);
    }
    .operator {
        
      background-color: #dededc;
      box-shadow: 0 5px #bebebe;
      color: #72778b;
    }
    .operator:active {
        
      box-shadow: 0 2px #bebebe;
        -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
        -moz-tranform: translateY(2px);
        transform: translateY(2px);
    }
    .other {
        
      background-color: #e3844c;
      box-shadow: 0 5px #e76a3d;
      color: #dededc;
    }
    .other:active {
        
      box-shadow: 0 2px #e76a3d;
        -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
        -moz-tranform: translateY(2px);
        transform: translateY(2px);
    }

四、实验运行结果截图（附运行效果图）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdmcHA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdmcHA_size_16_color_FFFFFF_t_70 1]

五、实验总结  
网页制作的美观主要靠布局，这需要高超的审美和技术力，若需转行前端，需详细学习css的知识和提高审美。  
另外使用Vue等框架可以做到快速开发、组件复用，即少量代码实现功能。

**另附完整代码下载  
https://github.com/gongfpp/calculatorByVue**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdmcHA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210621140245113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdmcHA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdmcHA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210621140642877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdmcHA=,size_16,color_FFFFFF,t_70