mirror of
https://github.com/Dichgrem/Vue.git
synced 2025-12-16 13:41:59 -05:00
185 lines
3.8 KiB
HTML
185 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>任务六 简易计算器</title>
|
||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: "Microsoft YaHei", sans-serif;
|
||
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
padding: 30px 50px;
|
||
text-align: center;
|
||
width: 380px;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
h2 {
|
||
margin-bottom: 20px;
|
||
color: #1565c0;
|
||
}
|
||
|
||
input, select, button {
|
||
padding: 8px;
|
||
margin: 8px 0;
|
||
width: 80%;
|
||
font-size: 16px;
|
||
border-radius: 8px;
|
||
border: 1px solid #ccc;
|
||
transition: 0.2s;
|
||
}
|
||
|
||
input:focus, select:focus {
|
||
outline: none;
|
||
border-color: #42a5f5;
|
||
box-shadow: 0 0 5px rgba(66,165,245,0.4);
|
||
}
|
||
|
||
button {
|
||
background: #42a5f5;
|
||
color: #fff;
|
||
border: none;
|
||
cursor: pointer;
|
||
width: 85%;
|
||
}
|
||
|
||
button:hover:not(:disabled) {
|
||
background: #1e88e5;
|
||
}
|
||
|
||
button:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.result {
|
||
margin-top: 15px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #2e7d32;
|
||
}
|
||
|
||
.error {
|
||
color: #d32f2f;
|
||
margin-top: 10px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
ul {
|
||
text-align: left;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
li {
|
||
list-style: disc;
|
||
margin: 3px 0;
|
||
}
|
||
|
||
.history {
|
||
margin-top: 20px;
|
||
text-align: left;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="container">
|
||
<h2>任务六 简易计算器</h2>
|
||
|
||
<p>请输入第一个数：</p>
|
||
<input type="text" v-model.trim="num1" placeholder="支持小数与负数">
|
||
|
||
<p>
|
||
<select v-model="op">
|
||
<option value="+">＋</option>
|
||
<option value="-">－</option>
|
||
<option value="*">×</option>
|
||
<option value="/">÷</option>
|
||
</select>
|
||
</p>
|
||
|
||
<p>请输入第二个数：</p>
|
||
<input type="text" v-model.trim="num2" placeholder="支持小数与负数">
|
||
|
||
<p><button :disabled="!num1 || !num2" @click="calculate">计算</button></p>
|
||
|
||
<div class="result" v-if="result !== null">
|
||
得出结果：{{ result }}
|
||
</div>
|
||
|
||
<p class="error">{{ errorMsg }}</p>
|
||
|
||
<div class="history" v-if="history.length > 0">
|
||
<h3>历史记录（最近5次）</h3>
|
||
<ul>
|
||
<li v-for="(item, index) in history" :key="index">{{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const { createApp } = Vue;
|
||
|
||
createApp({
|
||
data() {
|
||
return {
|
||
num1: '',
|
||
num2: '',
|
||
op: '+',
|
||
result: null,
|
||
errorMsg: '',
|
||
history: []
|
||
};
|
||
},
|
||
methods: {
|
||
isValidNumber(val) {
|
||
return /^-?\d+(\.\d+)?$/.test(val);
|
||
},
|
||
calculate() {
|
||
this.errorMsg = '';
|
||
this.result = null;
|
||
|
||
if (!this.isValidNumber(this.num1) || !this.isValidNumber(this.num2)) {
|
||
this.errorMsg = '请输入合法的数字（支持小数与负数）。';
|
||
return;
|
||
}
|
||
|
||
let a = parseFloat(this.num1);
|
||
let b = parseFloat(this.num2);
|
||
|
||
if (this.op === '/' && b === 0) {
|
||
this.errorMsg = '除数不能为 0。';
|
||
return;
|
||
}
|
||
|
||
let res;
|
||
switch (this.op) {
|
||
case '+': res = a + b; break;
|
||
case '-': res = a - b; break;
|
||
case '*': res = a * b; break;
|
||
case '/': res = a / b; break;
|
||
}
|
||
|
||
this.result = Math.round(res * 100) / 100; // 保留两位小数
|
||
|
||
// 添加历史记录
|
||
this.history.unshift(this.result);
|
||
if (this.history.length > 5) this.history.pop();
|
||
}
|
||
}
|
||
}).mount('#app');
|
||
</script>
|
||
</body>
|
||
</html>
|