基于h5，css，js的可登陆验证修改密码的mini音乐播放器

mini音乐播放器

一.作品简介

Mini音乐视频播放器通过存储API以及表单API并调用本地存储可以实现用户登录验证，用户的账号注册，以及修改密码等操作，来实现对用户的登陆验证，最终进入到音乐视频的播放页面。通过媒体API以及画布API可以实现音乐名称的滚动，以及音乐视频的上下首播放，暂停，调节音量，全屏，画中画等功能，还可以查看自己的添加的音乐视频。Mini音乐视频播放器主要通过html，css，js实现了一些简单的登录注册修改密码，视频音乐播放，查看我的音乐视频等功能，不仅可以实现对用户的验证，也可以给用户带来不错的音乐视频体验。

二.主要设计内容

1.登录mini音乐视频播放器模块，使用本地存储来实现，通过输入已经注册的用户名密码进行登录操作

function login() {
    var usernamelo = document.getElementById("usernamelo").value;
    var passwordlo = document.getElementById("passwordlo").value;
    var leng = window.localStorage.length;
    if (usernamelo == 0) {
        alert("请输入用户名");
        return 0;
    }
    if (passwordlo == 0) {
        alert("请输入密码");
        return 0;
    }
    if (leng == 0) {
        alert("用户不存在，请前往注册");
    }
    for (i = 0; i < leng; i++) {
        if (usernamelo == localStorage.key(i)) {
            if (passwordlo == localStorage.getItem(usernamelo)) {
                self.location = "视频播放界面.html";
                return;
            }
            else {
                self.location = "登录失败.html";
                return;
            }
        }
    }
    if (leng > 0) {
        alert("用户不存在，请前往注册");
    }
}

2.注册用户名密码模块，同样通过本地存储实现，输入未注册的用户名密码进行注册

function register() {
    var usernamein = document.getElementById("regiusername").value;
    var passwordin = document.getElementById("regipassword").value;
    if (usernamein == 0) {
        alert("请输入用户名");
        return 0;
    }
    if (passwordin == 0) {
        alert("请输入密码");
        return 0;
    }
    var len = window.localStorage.length;
    var regist = 0;
    for (i = 0; i < len; i++) {
        if (usernamein == localStorage.key(i)) {
            regist = 1;
            self.location = "注册失败.html";
            break;
        }
    }
    if (len == 0 || regist == 0) {
        localStorage.setItem(usernamein, passwordin);
        self.location = "注册成功.html";
    }
}

3.修改密码模块，输入用户名以及原密码新密码进行修改密码操作

function update() {
    var usernameup = document.getElementById("usernameup").value;
    var passwordup = document.getElementById("passwordup").value;
    var passworduse = document.getElementById("passworduse").value;
    var leng = window.localStorage.length;
    if (usernameup == 0) {
        alert("请输入用户名");
        return 0;
    }
    if (passworduse == 0) {
        alert("请输入原密码");
        return 0;
    }
    if (passwordup == 0) {
        alert("请输入新密码");
        return 0;
    }
    if (leng == 0) {
        alert("用户不存在，请前往注册");
    }
    for (i = 0; i < leng; i++) {
        if (usernameup == localStorage.key(i)) {
            if (passworduse == localStorage.getItem(usernameup)) {
                window.localStorage.setItem(usernameup, passwordup);
                self.location = "修改成功.html"
                return;
            }
            else {
                self.location = "修改失败.html";
                return;
            }
        }
    }
    if (leng > 0) {
        alert("用户不存在，请前往注册");
    }
}

4.视频播放器模块，点击播放按钮开始播放，下一个进入下一个视频

function nextv() {
    var video = document.getElementById("video1");
    //如果当前为最后一首，则直接回到第一首
    if (i == list1.length - 1)
        i = 0;
    else
        i++;
    video.src = list1[i];
    //下一首过后需要重新播放
    video.play();
}

function previousv() {
    var video = document.getElementById("video1");
    //当为第一首时，直接回到最后一首
    if (i == 0) {
        i = list1.length - 1;
    } else
        i--;
    video.src = list1[i];
    video.play();
}

5.音乐播放器模块，点击播放开始播放，可循环显示音乐名，下一曲进入下一个音乐

function nextm() {
    var music = document.getElementById("music");
    //如果当前为最后一首，则直接回到第一首
    if (j == list.length - 1)
        j = 0;
    else
        j++;
    music.src = list[j];
    //下一首过后需要重新播放
    music.play();
    draw();
}

function previousm() {
    var music = document.getElementById("music");
    //当为第一首时，直接回到最后一首
    if (j == 0) {
        j = list.length - 1;
    } else
        j--;
    music.src = list[j];
    music.play();
}

6.我的音乐视频模块，在音乐视频播放器模块点击即可进入查看我的视频和我的音乐

function audio() {
    var tb = document.getElementById("tb");
    for (k = 0; k < list2.length; k++) {
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.innerHTML = list2[k];
        tr.appendChild(td);
        td = document.createElement("td");
        td.innerHTML=list3[k];
        tr.appendChild(td)
        tb.appendChild(tr);
    }
}

7.我的音乐播放器歌名滚动模块，通过画布API实现滚动

function draw() {
    var c = document.getElementsByTagName('canvas')[0];
    if (c != undefined) {
        var ctx = c.getContext('2d');
        ctx.stroke();
        ctx.fillStyle = "#DCE2F1"
        ctx.font = "bold 150px 宋体";
        ctx.clearRect(-600, 0, 2500, 200);
        ctx.translate(20, 0);
        ctx.fillText(list2[j], -600, 160);
        count++;
    }
    if (count == 100) {
        count = 0;
        ctx.translate(-2000, 0);
    }

}

三.解决的关键问题

1.注册账号的问题，要想实现登录验证，每个人有自己的账号，第一步操作就是要进行注册。在注册账号时遇到的问题就是如何避免重复注册账号，在localstorage中，可以重复的添加密钥，添加相同的密钥，会修改值，这就导致了可能出现注册账号时出现了修改密码的局面。一开始我使用了getiteam，是获取的密码来与输入的账号进行比对是否注册过，导致了一次次的失败，我还百思不得其解，不知道哪里错了。我便想到了通过验证是否存在相同的密钥来实现，但localstorage没有提供寻找密钥的方法，最后只能通过获取长度使用for循环来寻找，最后成功的实现了。

2.我的音乐视频模块中，布局的问题。由于我的布局知识比较匮乏，对布局不是很懂，导致此部分耗费了较多的时间，在进行查看我的视频我的音乐时，由于是表格，但是没有边框，边框是我自己寻找的背景图片来实现的，所以难以实现居中的效果。在出现很多个字的歌曲名时，会出现对不齐的情况，文字会集体靠右，看着很不美观，最后在网上寻找到相对定位才解决了这个问题。

3.在进行登陆，注册，修改密码等操作的时候，会出现没有输入账号密码点击登录如果存在空白账号就可以进行登录的情况，这导致了系统的安全性特别低。在进行思考后，我选择了先获取本地存储的长度，如果等于0就会提示用户未注册，表示本地存储里面没有任何数据。在大于0的时候，就会判定是否输入了账号密码或者新密码，并且判定输入的用户是否存在。

4.页面的跳转功能问题，在课程中，只学习了简单的通过超链接加本地的地址来实现跳转，并没有学习通过js来实现跳转。而这种多个页面的项目，跳转显得十分的重要，没有跳转就无法实现功能，在网上寻找资料后，学习到了很多的跳转方法，最后成功使用了self.location =来实现跳转，只要两个html文件在一个文件夹里面就可以实现直接跳转。返回按钮的跳转使用了window.history.go(-1)来实现跳转。

四.系统详细实现与测试结果分析

1.登录mini音乐视频播放器模块

使用两个input来输入登录的用户名和密码，type分别为text和password，placeholder设为请输入用户名和密码，同时设置一个登陆的按钮，type为button，通过连接设置立即注册跳转的连接，整体页面的框架就设计好了。如下

通过获取id的方式获取用户输入的用户名和密码的value，使用if检查输入是否为0表示没有输入内容，则提示请用户输入。如果本地存储的长度为0或者不存在则提示用户不存在。
For循环长度设为本地存储的长度，依次查找key，找到对应的用户名后开始比对密码，如果正确则跳转到视频播放界面，

错误则跳转到登陆失败界面。

2.注册用户名密码模块

使用两个input来输入注册的用户名和密码，type分别为text和password，placeholder设为请输入用户名和密码，同时设置一个注册和返回主界面的按钮，type为button。

用户在登陆前先进行注册操作，用户输入想要注册的用户名以及密码，js通过id获取到用户输入的用户名密码的value，判断值是否为0，来判断用户是否输入了用户名密码。

输入用户名密码后，判断本地存储的长度，是否为0，如果为0即可直接注册，不为0就要与本地存储的用户名进行比较，如果已经注册则会提示账号已注册，没有注册则会提示注册成功，点击即可进入登陆界面。

3.修改密码模块

使用三个input来输入需要修改的用户名和旧密码新密码，type分别为text和password，password，placeholder设为请输入用户名和密码，同时设置一个确认修改和返回音乐视频界面的按钮，type为button。背景图采用与注册界面相同的来进行设计。

用户在输入正确的账号密码登陆成功进入音乐视频播放界面后，点击左侧的修改密码按钮即可进入，用户输入想要修改的用户名以及密码，js通过id获取到用户输入的用户名密码的value，判断值是否为0，来判断用户是否输入了用户名密码。

先获取本地存储的长度，检测长度是否为0，如果为0则表示没有存储任何数据，则提示用户不存在。
以leng为循环次数进入循环，查找与用户输入用户名相同的用户名，检查原密码是否相同，相同则修改为新密码。

4.视频播放器模块

本模块通过登陆界面登录成功后进入。最后三个界面均是通过三个div来实现，先是一个大的div包含两个左右的div模型，左边包含一些按键和欢迎的字样，右边包含了视频和一些图画，以及位于最下方的三个按钮，三个按钮都通过margin来实现定位。

点击左侧的按钮，通过self.location即可进入同目录下面的html界面，分别为修改密码，查看我的音乐视频，退出到登录界面。

视频通过src导入，在标签中加入controls来实现播放暂停，音量以及全屏。

音乐播放按钮也是通过self.location来跳转到音乐播放界面的。
点击下一个视频，首先通过id获取到video，如何判断当前播放的为第几个视频，如果为最后一个则跳转回第一个，否则直接下一个，然后再重新播放。

上一个也是同样的道理，如果为第一个则回到最后一个。

5.音乐播放器模块

本模块通过视频播放界面点击后进入。最后三个界面均是通过三个div来实现，先是一个大的div包含两个左右的div模型，左边包含一些按键和欢迎的字样，右边包含了显示歌曲名的画布和音乐控制器，以及位于最下方的三个按钮，三个按钮都通过margin来实现定位。

左侧同样也有三个相同的按钮，通过self.location即可进入同目录下面的html界面，分别为修改密码，查看我的音乐视频，退出到登录界面。

音乐通过src导入，在标签中加入controls来实现播放暂停，音量以及全屏。

视频播放按钮也是通过self.location来跳转到音乐播放界面的。
点击下一首歌曲，首先通过id获取到audio，如何判断当前播放的为第几个视频，如果为最后一首歌曲则跳转回第一首歌曲，否则直接下一首，然后再重新播放。
通过画布API，在画布中画出对应的歌曲名字，每次画完后去除对应的矩形范围，再使用translate改变源心，使用setInterval一直调用该函数，实现滚动播放效果如下：

6.我的音乐视频模块

本模块通过音乐或者视频播放界面点击后进入。最后三个界面均是通过三个div来实现，先是一个大的div包含两个左右的div模型，左边包含一些按键和欢迎的字样，右边包含了table和一些图画，table采用相对定位，来改变之前与背景图片的边框对不齐的情况，垂直方向采用vertical-align: middle;将其置于中间。

Table的头选择了在html中直接写出，而数据选择通过js来进行动态的修改，根据用户的音乐和视频来进行动态的调整。先通过id获取到table，通过for循环innerHTML依次插入用户的音乐和视频名称，每次都appdchild（td）,最后再appendchild（tr）直到循环结束插入。