用js实现一个登录页面，实现以下效果1.选中效果移动 2.显示内容切换移动效果 3.input框获取焦点效果 失去焦点效果 4.点击登录或者注册上升效果 显示是否成功 5.验证效果(表单验证) 6.将注册好的用户加入到本地存储 (用户不允许重复) 7.进行登录验证

好的，我来回答这个问题。不过，这是一个关于前端开发的问题，我需要在文字中详细描述实现方法，可能会比较麻烦。如果您需要更详细的指导，建议您参考一些前端开发的教程或者视频。

首先，我们需要设计一个基本的登录页面，包括用户名和密码的输入框、登录和注册按钮等。然后，我们可以使用一些前端框架或者库来实现一些效果，比如jQuery、Bootstrap等。

1. 实现选中效果移动

我们可以使用CSS3的transition属性来实现选中效果的移动。比如，当用户选中一个输入框时，我们可以使其上方的标签移动到输入框的上方。可以使用以下样式：

label {
    position: absolute;
    left: 10px;
    top: 10px;
    transition: all 0.3s ease;
}

input:focus + label, input:not(:placeholder-shown) + label {
    top: -10px;
    font-size: 12px;
}

2. 实现显示内容切换移动效果

我们可以使用jQuery的animate()方法来实现显示内容的切换移动效果。比如，当用户点击“注册”按钮时，我们可以使登录表单向左移动，同时将注册表单从右侧移动到中央。可以使用以下代码：

$("#register-link").click(function() {
    $("#login-form").animate({left: "-300px"}, 500, function() {
        $("#register-form").css("left", "300px").show();
        $("#register-form").animate({left: "0px"}, 500);
    });
});

3. 实现input框获取焦点效果失去焦点效果

我们可以使用CSS3的:focus伪类来实现input框获取焦点的效果。比如，当用户选中一个输入框时，我们可以使其边框颜色变化。可以使用以下样式：

input:focus {
    border-color: #007bff;
    box-shadow: none;
}

4. 实现点击登录或者注册上升效果 显示是否成功

我们可以使用jQuery的animate()方法来实现点击登录或者注册按钮时的上升效果。比如，当用户点击“登录”按钮时，我们可以使按钮上升一些距离，并弹出一个提示框来显示登录是否成功。可以使用以下代码：

$("#login-button").click(function() {
    $(this).animate({top: "-10px"}, 100, function() {
        $(this).animate({top: "0px"}, 100);
    });
    // 验证用户名和密码是否正确
    // 如果正确，弹出登录成功提示框
    // 如果不正确，弹出登录失败提示框
});

5. 实现表单验证

表单验证是一个非常重要的功能，可以避免用户提交错误的数据。可以使用正则表达式来验证用户输入的数据是否符合要求。比如，我们可以使用以下代码来验证用户输入的用户名和密码是否符合要求：

function validateUsername(username) {
    var pattern = /^[a-zA-Z]\w{5,17}$/;
    return pattern.test(username);
}

function validatePassword(password) {
    var pattern = /^[a-zA-Z0-9_-]{6,18}$/;
    return pattern.test(password);
}

$("#register-button").click(function() {
    var username = $("#register-username").val();
    var password = $("#register-password").val();
    if (!validateUsername(username)) {
        alert("用户名不符合要求！");
        return;
    }
    if (!validatePassword(password)) {
        alert("密码不符合要求！");
        return;
    }
    var users = JSON.parse(localStorage.getItem("users")) || [];
    for (var i = 0; i < users.length; i++) {
        if (users[i].username === username) {
            alert("该用户名已被注册，请使用其他用户名！");
            return;
        }
    }
    users.push({username: username, password: password});
    localStorage.setItem("users", JSON.stringify(users));
    alert("注册成功！");
});

$("#login-button").click(function() {
    var username = $("#login-username").val();
    var password = $("#login-password").val();
    if (!validateUsername(username)) {
        alert("用户名不符合要求！");
        return;
    }
    if (!validatePassword(password)) {
        alert("密码不符合要求！");
        return;
    }
    var users = JSON.parse(localStorage.getItem("users")) || [];
    for (var i = 0; i < users.length; i++) {
        if (users[i].username === username) {
            if (users[i].password === password) {
                alert("登录成功！");
            } else {
                alert("密码错误，请重新输入！");
            }
            return;
        }
    }
    alert("该用户不存在，请先注册！");
});

6. 将注册好的用户加入到本地存储 (用户不允许重复)

我们可以使用localStorage来将注册好的用户信息存储到本地。每次注册新用户时，我们可以先检查localStorage中是否已经存在该用户，如果不存在，则将该用户信息添加到localStorage中。可以使用以下代码：

$("#register-button").click(function() {
    var username = $("#register-username").val();
    var password = $("#register-password").val();
    var users = JSON.parse(localStorage.getItem("users")) || [];
    for (var i = 0; i < users.length; i++) {
        if (users[i].username === username) {
            alert("该用户名已被注册，请使用其他用户名！");
            return;
        }
    }
    users.push({username: username, password: password});
    localStorage.setItem("users", JSON.stringify(users));
    alert("注册成功！");
});

7. 进行登录验证

我们可以使用localStorage来进行登录验证。当用户输入用户名和密码后，我们可以先检查localStorage中是否存在该用户，如果存在，则检查密码是否正确。可以使用以下代码：

$("#login-button").click(function() {
    var username = $("#login-username").val();
    var password = $("#login-password").val();
    var users = JSON.parse(localStorage.getItem("users")) || [];
    for (var i = 0; i < users.length; i++) {
        if (users[i].username === username) {
            if (users[i].password === password) {
                alert("登录成功！");
            } else {
                alert("密码错误，请重新输入！");
            }
            return;
        }
    }
    alert("该用户不存在，请先注册！");
});

以上是一个简单的登录页面的实现方法，具体实现还需要根据实际情况进行调整和完善。