html科学计算器,vue.js实现的经典计算器/科学计算器功能示例

本文实例讲述了vue.js实现的经典计算器/科学计算器功能。分享给大家供大家参考，具体如下：

1. HTML部分：

Show Advanced Mode ⚈

Show Basic Mode ⚆

7

8

9

*

<=

C

4

5

6

/

(

)

1

2

3

-

x 2

±

0

.

%

+

=

sin

cos

tan

x^

<=

C

log

ln

e

°

rad

√

7

8

9

/

x 2

x !

4

5

6

*

(

)

1

2

3

-

%

±

0

.

π

+

=

2. css部分：

body {

background: linear-gradient(to right, #85D8CE, #085078);

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

display: flex;

flex-wrap: wrap;

justify-content: center;

align-item: center;

}

.calculator {

width: 440px;

padding: 20px;

border-radius: 5px;

margin: 20px auto;

font-size: 16px;

background-color: #333333;

}

.input {

width: 420px;

height: 50px;

border-radius: 0px;

border: 1px solid black;

background-color: #333333;

color: #d9d9d9;

padding: 0 5px 0 5px;

margin: 0 0px 10px 0px;

font-size: 30px;

}

.input:focus,

.input:active {

border-color: #03a9f4;

box-shadow: 0 0 4px #03A9F4;

outline: none 0;

}

.button {

margin: 3px;

width: 63px;

border: 1px solid #0d0d0d;

height: 30px;

border-radius: 4px;

color: #d9d9d9;

background-color: #1a1a1a;

cursor: pointer;

outline: none;

}

.mode {

display: flex;

flex-wrap: wrap;

justify-content: space-evenly;

}

.equal-sign {

background-color: green;

width: 133px;

}

.toggle-button {

border: none;

background-color: #333333;

cursor: pointer;

outline: none;

font-size: 1rem;

color: #fff;

text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);

}

p {

margin-top: 0;

}

button::-moz-focus-inner {

border-color: transparent;

}

3. js部分：

let app &