如何做一个简单好玩的音乐网页
作者：朝思
下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件
一共分为两部分：
一：播放部分
二：钢琴部分
由上图可见，左上角的为播放部分，可以实现基本的操作功能，支持鼠标和键盘操作
其他就是钢琴部分，我把这分为两个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;
}
接下来就是钢琴的部分
钢琴我把它分为了二个部分，一个是上面的词谱，另一个便是下面的钢琴按键部分，然后在右上角我给了一个背景音乐的按钮
首先html部分，一样的简洁
然后css部分，词谱部分是一个轮播的格式，钢琴按键部分排列整齐便可
Javascript部分更加简洁，首先是词谱的左右换页
然后再是背景音乐按钮的点击事件
接下来就是核心，钢琴按钮的点击事件，先是鼠标的点击
然后再加上按键的点击事件
就这样，一个简洁好用的音乐网页便完成了
