63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
||
<title>🖩网页计算器</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<main id="app" class="calculator">
|
||
<header class="topbar">
|
||
<div class="brand">🖩网页计算器</div>
|
||
</header>
|
||
|
||
<section class="display">
|
||
<div class="expression" :title="expression">{{ formattedExpression }}</div>
|
||
<div class="result" :class="{ error: !!errorMsg }">{{ errorMsg || formattedResult }}</div>
|
||
</section>
|
||
|
||
<section class="keypad">
|
||
<button @click="press('(')">(</button>
|
||
<button @click="press(')')">)</button>
|
||
<button @click="func('sqrt')">√</button>
|
||
<button @click="clear()">AC</button>
|
||
|
||
<button @click="func('sin')">sin</button>
|
||
<button @click="func('cos')">cos</button>
|
||
<button @click="func('tan')">tan</button>
|
||
<button @click="backspace()">⌫</button>
|
||
|
||
<button @click="press('7')">7</button>
|
||
<button @click="press('8')">8</button>
|
||
<button @click="press('9')">9</button>
|
||
<button @click="op('÷')">÷</button>
|
||
|
||
<button @click="press('4')">4</button>
|
||
<button @click="press('5')">5</button>
|
||
<button @click="press('6')">6</button>
|
||
<button @click="op('×')">×</button>
|
||
|
||
<button @click="press('1')">1</button>
|
||
<button @click="press('2')">2</button>
|
||
<button @click="press('3')">3</button>
|
||
<button @click="op('-')">-</button>
|
||
|
||
<button @click="press('0')">0</button>
|
||
<button @click="press('.')">.</button>
|
||
<button @click="square()">x²</button>
|
||
<button @click="op('+')">+</button>
|
||
|
||
<button class="span-2" @click="ans()">ANS</button>
|
||
<button class="span-2 action" @click="equals()">=</button>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Frameworks -->
|
||
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/mathjs@11/dist/math.min.js"></script>
|
||
<!-- App -->
|
||
<script src="./app.js"></script>
|
||
</body>
|
||
</html> |