简易登录以及注册界面制作

以下为登录和注册页面的图片

登录：

注册：

先介绍登录页面

以下为登录的html

 

以下为登录的js

 

//获取页面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var login=document.getElementById("login");
var setInput=document.getElementById("setInput");
//给localStorage加载初始数据
localStorage.username+= "jinhua:jinhua666;";
localStorage.username+= "sjaodoa:fajsdlfja;";
//设置个函数判断localStorage中是否有对应的账号密码
function tuust(value) {
    var dta=localStorage.username.split(";");
    for (let i=0;i

以下为注册页面的html

 

以下为注册页面的js

 

//获取页面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var passwordTwo=document.getElementById("passwordTwo");
var setInput=document.getElementById("setInput");
//给注册按钮增加个点击事件，判断用户名和密码是否为空，密码和重复密码是否一致，注册成功跳转
setInput.addEventListener("click",function () {
    if (username.value==""||password.value==""||passwordTwo.value==""){
        alert("用户名以及密码不能为空");
    }else if (password.value!=passwordTwo.value) {
        alert("密码和重复密码不一致");
    }else {
        if (!tuust(username.value)){
            localStorage.username+=username.value+":"+password.value+";";
            location.href="enter.html";
            alert("恭喜，注册成功");
        } else {
            alert("你输入的用户名已经被注册");
            username.value="";
        }
    }
});
//创建一个方法，判断注册的用户名是否被注册
function tuust(value) {
    var dta=localStorage.username.split(";");
    for (let i=0;i