第二次作业
<!DOCTYPE html>
<html>
<head>
<title>登陆界面</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 300px;
padding: 20px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
}
.container h2 {
text-align: center;
}
.container input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container" id="login-form">
<h2>登陆</h2>
<input type="text" placeholder="用户名" id="login-username">
<input type="password" placeholder="密码" id="login-password">
<button type="button" onclick="handleLogin()">登陆</button>
</div>
<div class="container" id="calculator-form" style="display: none;">
<h2>简单计算器</h2>
<form>
<input type="text" id="calculator-num1" placeholder="第一个数" /><br>
<input type="text" id="calculator-num2" placeholder="第二个数" /><br>
<input type="submit" value="加" onclick="handleAdd()" />
<input type="submit" value="减" onclick="handleSubtract()" />
<input type="submit" value="乘" onclick="handleMultiply()" />
<input type="submit" value="除" onclick="handleDivide()" />
<input type="submit" value="开方" onclick="handleSquareRoot()" />
</form>
<p id="result"></p>
</div>
<script>
function handleLogin() {
var username = document.getElementById("login-username").value;
var password = document.getElementById("login-password").value;
// 进行用户名和密码的验证逻辑
if (username === "admin" && password === "password") {
document.getElementById("login-form").style.display = "none";
document.getElementById("calculator-form").style.display = "block";
} else {
alert("用户名或密码错误！");
}
}
function handleAdd() {
var num1 = parseFloat(document.getElementById("calculator-num1").value);
var num2 = parseFloat(document.getElementById("calculator-num2").value);
var result = num1 + num2;
document.getElementById("result").innerHTML = "结果：" + result;
}
function handleSubtract() {
var num1 = parseFloat(document.getElementById("calculator-num1").value);
var num2 = parseFloat(document.getElementById("calculator-num2").value);
var result = num1 - num2;
document.getElementById("result").innerHTML = "结果：" + result;
}
function handleMultiply() {
var num1 = parseFloat(document.getElementById("calculator-num1").value);
var num2 = parseFloat(document.getElementById("calculator-num2").value);
var result = num1 * num2;
document.getElementById("result").innerHTML = "结果：" + result;
}
function handleDivide() {
var num1 = parseFloat(document.getElementById("calculator-num1").value);
var num2 = parseFloat(document.getElementById("calculator-num2").value);
var result = num1 / num2;
document.getElementById("result").innerHTML = "结果：" + result;
}
function handleSquareRoot() {
var num1 = parseFloat(document.getElementById("calculator-num1").value);
var result = Math.sqrt(num1);
document.getElementById("result").innerHTML = "结果：" + result;
}
</script>
</body>
</html>
浙公网安备 33010602011771号