js+css+html创建一个死期银行账户的类 成员变量: 账户号码 密码(加密) 存储金额(余额) 存储年限 方法: 构造方法 设置,账户号码,密码 存款 设置年限 取款
时间: 2023-12-18 22:03:24 浏览: 63
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>死期银行账户</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"], input[type="number"] {
padding: 5px;
margin-bottom: 10px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>死期银行账户</h1>
<form>
<label for="account-number">账户号码:</label>
<input type="text" id="account-number" required>
<label for="password">密码:</label>
<input type="password" id="password" required>
<label for="balance">存储金额:</label>
<input type="number" id="balance" min="0" required>
<label for="duration">存储年限:</label>
<input type="number" id="duration" min="1" required>
<button type="button" onclick="createAccount()">创建账户</button>
</form>
<script>
class DeadBankAccount {
constructor(accountNumber, password, balance, duration) {
this.accountNumber = accountNumber;
this.password = password;
this.balance = balance;
this.duration = duration;
}
deposit(amount) {
this.balance += amount;
}
withdraw(amount) {
if (amount > this.balance) {
console.error("余额不足!");
} else {
this.balance -= amount;
}
}
}
function createAccount() {
const accountNumber = document.getElementById("account-number").value;
const password = document.getElementById("password").value;
const balance = parseInt(document.getElementById("balance").value);
const duration = parseInt(document.getElementById("duration").value);
const account = new DeadBankAccount(accountNumber, password, balance, duration);
console.log("账户创建成功:", account);
}
</script>
</body>
</html>
```
解释一下代码:
1. HTML 部分包括一个表单,其中有四个输入框:账户号码、密码、存储金额和存储年限,以及一个按钮用于创建账户。
2. CSS 部分设置了一些样式,使表单看起来更美观。
3. JavaScript 部分定义了一个 `DeadBankAccount` 类,它有四个成员变量:账户号码、密码、存储金额和存储年限,以及两个方法:`deposit` 和 `withdraw` 用于存款和取款。
4. 在 `createAccount` 函数中,我们从输入框中获取用户输入的值,并使用它们创建一个新的账户对象。在这个例子中,我们只是简单地将其打印到控制台上,但在实际应用中,我们可能会将其存储在数据库中或将其发送到服务器端进行进一步处理。
阅读全文