如何做一个简单好玩的音乐网页

（作者：宁佐潮，撰写时间：2019年1月16日）
下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件
一共分为两部分：
一：播放部分
二：钢琴部分
如何做一个简单好玩的音乐网页
由上图可见，左上角的为播放部分，可以实现基本的操作功能，支持鼠标和键盘操作
其他就是钢琴部分，我把这分为两个html写入，把另一个小的用iframe标签嵌入进去

首先是布局，第一部分的布局十分简洁，一个时间+四个按钮，然后就是一些歌曲
如何做一个简单好玩的音乐网页
然后就是css样式，可以说是十分简洁了

接下来就是重点，javascript的写法，主要就是简单的if 和for循环
这个是鼠标点击事件

这个是键盘的点击事件

再加一个自动播放，获取到音乐的时长，我把结尾减去了5秒
如何做一个简单好玩的音乐网页
调用的方法在这里
//播放
function one(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
for(var i = 0;i<musiclist.length;i++){
musiclist[ind].play();
}
tranfor = false;
}
//暂停
function two(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
for(var i = 0;i<musiclist.length;i++){
musiclist[ind].pause();
}
tranfor = false;
}
//上一首
function three(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
var leftBtn = ind-1;
if(leftBtn < 0){
alert(“已经到顶了!”);
return;
}else{
for(var i = 0;i<musiclist.length;i++){
musiclist[leftBtn].play();
musiclist[ind].pause();
}
ind–;
}
tranfor = false;
}
//下一首
function four(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
var rightBtn = ind+1;
if(rightBtn === musiclist.length){
alert(“居然没有歌了，快去添加吧!”);
return;
}else{
for(var i = 0;i<musiclist.length;i++){
musiclist[rightBtn].play();
musiclist[ind].pause();
}
ind++;
}
tranfor = false;
}