第二次作业--设计一个包含登录界面的计算器软件
[实验目的]
1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具。
[实验内容]
设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录。
[流程图]
登陆界面流程图：
计算器界面流程图：
【代码】
登陆界面代码：
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.login-container {
width: 300px;
margin: 100px auto;
}
input, button {
margin: 10px 0;
padding: 8px;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="button" onclick="login()">Login</button>
</form>
</div>
<script>
function login() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 假设这里是你的登陆逻辑，验证用户名和密码等操作
if (username === 'user' && password === 'password') {
window.location.href = 'calculator.html'; // calculator.html是你的计算器页面
} else {
alert('Invalid username or password');
}
}
</script>
</body>
</html>
计算器代码：
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.calculator-container {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
input, button {
padding: 20px;
box-sizing: border-box;
border: 1px solid #ccc;
font-size: 18px;
}
#history {
grid-column: span 4;
}
#result {
grid-column: span 4;
}
button {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button.clear {
grid-column: span 2;
background-color: #dc3545;
}
</style>
</head>
<body>
<div class="calculator-container">
<input type="text" id="history" placeholder="History" readonly>
<input type="text" id="result" placeholder="0" readonly>
<button onclick="addToHistory('1')">1</button>
<button onclick="addToHistory('2')">2</button>
<button onclick="addToHistory('3')">3</button>
<button onclick="addToHistory('+')">+</button>
<button onclick="addToHistory('4')">4</button>
<button onclick="addToHistory('5')">5</button>
<button onclick="addToHistory('6')">6</button>
<button onclick="addToHistory('-')">-</button>
<button onclick="addToHistory('7')">7</button>
<button onclick="addToHistory('8')">8</button>
<button onclick="addToHistory('9')">9</button>
<button onclick="addToHistory('*')">*</button>
<button onclick="addToHistory('0')">0</button>
<button onclick="clearInput()" class="clear">C</button>
<button onclick="addToHistory('/')">/</button>
<button onclick="calculateSquareRoot()">√</button>
<button onclick="performCalculation()">=</button>
<button onclick="showHistory()">History</button>
</div>
<script>
function addToHistory(value) {
var historyInput = document.getElementById('history');
var currentValue = historyInput.value;
historyInput.value = currentValue + value;
}
function performCalculation() {
var historyInput = document.getElementById('history');
var resultInput = document.getElementById('result');
try {
var result = eval(historyInput.value);
resultInput.value = result;
saveToHistory(historyInput.value + '=' + result);
} catch (error) {
resultInput.value = 'Error';
}
}
function calculateSquareRoot() {
var inputNumber = parseFloat(document.getElementById('history').value);
var resultInput = document.getElementById('result');
var history = '√' + inputNumber;
var result = Math.sqrt(inputNumber);
resultInput.value = result;
saveToHistory(history + '=' + result);
}
function saveToHistory(record) {
var history = JSON.parse(localStorage.getItem('calculatorHistory')) || [];
history.push(record);
localStorage.setItem('calculatorHistory', JSON.stringify(history));
}
function clearInput() {
document.getElementById('history').value = '';
document.getElementById('result').value = '0';
}
function showHistory() {
var history = JSON.parse(localStorage.getItem('calculatorHistory')) || [];
alert('Calculator History:\n' + history.join('\n'));
}
</script>
</body>
</html>
【界面展示图】
登陆界面：
输入错误的用户名和密码：
输入正确的用户名和密码：
登录成功，直接跳转至计算器计算器界面。
计算器：
测试：
加法
减法
乘法
除法
算术开方
查看历史记录
