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

gongfpp

已于 2022-05-14 19:22:14 修改

阅读量1.1k

点赞数

分类专栏：实践项目文章标签： vue js css html

于 2021-06-21 14:09:57 首次发布

本文链接：https://blog.csdn.net/gongfpp/article/details/118085519

版权

实践项目专栏收录该内容

11 篇文章 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);
}