js怎么有双登陆框

使用JavaScript实现双登陆框的方式有很多，使用HTML和CSS创建两个登陆框、为两个登陆框设置不同的ID、使用JavaScript进行逻辑控制、使用事件监听实现交互效果。下面将详细描述其中一种实现方式。

一、HTML和CSS创建两个登陆框

在创建双登陆框的过程中，HTML和CSS是必不可少的基础部分。首先，我们需要在HTML中创建两个独立的登陆框，并使用CSS进行样式设计。

1、创建HTML结构

在HTML中，我们可以创建两个独立的div元素，分别作为两个登陆框的容器。每个登陆框内包含表单元素，如输入框和按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="login-container">
        <div id="login-box-1" class="login-box">
            <h2>Login 1</h2>
            <form id="form-1">
                <div class="input-group">
                    <label for="username-1">Username</label>
                    <input type="text" id="username-1" name="username">
                </div>
                <div class="input-group">
                    <label for="password-1">Password</label>
                    <input type="password" id="password-1" name="password">
                </div>
                <button type="submit">Login</button>
            </form>
        </div>
        <div id="login-box-2" class="login-box">
            <h2>Login 2</h2>
            <form id="form-2">
                <div class="input-group">
                    <label for="username-2">Username</label>
                    <input type="text" id="username-2" name="username">
                </div>
                <div class="input-group">
                    <label for="password-2">Password</label>
                    <input type="password" id="password-2" name="password">
                </div>
                <button type="submit">Login</button>
            </form>
        </div>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

2、设计CSS样式

使用CSS对登陆框进行样式设计，使其美观，并且易于用户交互。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}
#login-container {
    display: flex;
    gap: 20px;
}
.login-box {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-box h2 {
    margin: 0 0 20px 0;
}
.input-group {
    margin-bottom: 15px;
}
.input-group label {
    display: block;
    margin-bottom: 5px;
}
.input-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}
button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}

二、为两个登陆框设置不同的ID

在HTML结构中，我们已经为每个登陆框和表单元素设置了不同的ID。这些ID将在JavaScript中用于获取元素并添加事件监听。

三、使用JavaScript进行逻辑控制

JavaScript将用于处理表单的提交事件，并根据不同的登陆框进行不同的处理逻辑。

1、获取元素并添加事件监听

使用document.getElementById获取表单元素，并为每个表单添加submit事件监听器。

document.addEventListener('DOMContentLoaded', () => {
    const form1 = document.getElementById('form-1');
    const form2 = document.getElementById('form-2');
    form1.addEventListener('submit', (event) => {
        event.preventDefault();
        handleLoginForm1();
    });
    form2.addEventListener('submit', (event) => {
        event.preventDefault();
        handleLoginForm2();
    });
});

2、处理表单提交逻辑

在事件监听器中，调用相应的处理函数。例如，handleLoginForm1和handleLoginForm2可以分别处理两个表单的提交逻辑。

function handleLoginForm1() {
    const username = document.getElementById('username-1').value;
    const password = document.getElementById('password-1').value;
    // 处理登录逻辑，例如验证用户名和密码
    if (username === 'user1' && password === 'pass1') {
        alert('Login 1 Successful');
    } else {
        alert('Login 1 Failed');
    }
}
function handleLoginForm2() {
    const username = document.getElementById('username-2').value;
    const password = document.getElementById('password-2').value;
    // 处理登录逻辑，例如验证用户名和密码
    if (username === 'user2' && password === 'pass2') {
        alert('Login 2 Successful');
    } else {
        alert('Login 2 Failed');
    }
}

四、使用事件监听实现交互效果

通过JavaScript的事件监听机制，我们可以实现丰富的交互效果。例如，可以在用户输入时实时验证输入内容，或在表单提交时显示加载动画等。

1、实时验证输入内容

可以在输入框的input事件中添加实时验证逻辑，提示用户输入是否合法。

document.getElementById('username-1').addEventListener('input', (event) => {
    const value = event.target.value;
    if (value.length < 3) {
        event.target.setCustomValidity('Username must be at least 3 characters long.');
    } else {
        event.target.setCustomValidity('');
    }
});

2、提交时显示加载动画

在表单提交时，可以显示一个加载动画，提示用户正在处理请求。

function handleLoginForm1() {
    const username = document.getElementById('username-1').value;
    const password = document.getElementById('password-1').value;
    // 显示加载动画
    const button = document.querySelector('#form-1 button');
    button.disabled = true;
    button.textContent = 'Loading...';
    setTimeout(() => {
        // 处理登录逻辑，例如验证用户名和密码
        if (username === 'user1' && password === 'pass1') {
            alert('Login 1 Successful');
        } else {
            alert('Login 1 Failed');
        }
        // 恢复按钮状态
        button.disabled = false;
        button.textContent = 'Login';
    }, 2000);
}

五、总结

通过HTML和CSS创建两个独立的登陆框，并使用JavaScript进行逻辑控制和交互效果，可以实现双登陆框的功能。具体实现包括：创建HTML结构、设计CSS样式、获取元素并添加事件监听、处理表单提交逻辑、实时验证输入内容和提交时显示加载动画。通过这些步骤，可以实现一个功能完善的双登陆框。

在项目中，如果需要管理多个团队或任务，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两个系统可以帮助团队更高效地协同工作和管理项目。