html jq制作钢琴,JS jQuery === 实现钢琴效果

height:100px;

width:100px;

position: absolute;

left:300px;

top:300px;

background:red;

}

div:nth-of-type(2){

left:400px;

background:orange;

}

div:nth-of-type(3){

left:500px;

background:yellow;

}

div:nth-of-type(4){

left:600px;

background:green;

}

div:nth-of-type(5){

left:700px;

background:#0ff;

}

div:nth-of-type(6){

left:800px;

background:blue;

}

div:nth-of-type(7){

left:900px;

background:purple;

}

//window 点击 ，自动播放

var music = '1155665 4433221 5544332 5544332 1155665 4433221';var sentences = music.split(" ");

$(window).on('click',function(){

play_yiju(sentences[0])

})var count = 0 ; //用来表示当前播放到哪一句了,当执行一次函数的时候 证明播放完一句了。

functionplay_yiju(yiju){if(count === sentences.length){ //当我的计数器=我所有音乐的长度了，证明播放完毕，return

return;

}

count++ //播放一次count++

//获取每一句里面的字符，与 div的索引有关系，与audio的索引有关系

//获取到每一句 里面的每一个音符

var notes = yiju.split("");//获取了包括每个音符的数组

//遍历这个数组

for(let i = 0 ; i < notes.length;i++){//获取索引、、在第一个音符调用自己的audio 后 500毫秒之后再调用第二个，才能形成音乐的效果，所以在这里要使用一个setTimeout 函数

//第一个 0 * 500 第二个 1 * 500ms后播放，第三个 2 * 500 ms后播放 //所以时间间隔应该是 500 * i

setTimeout(function(){//获取对应的div 索引 和 audio的索引

var index = notes[i]-1;//加载音频

$('audio')[index].load();//播放音频

$('audio')[index].play();//给div 加上动画

$('div').eq(index).animate({

height:300,

top:100},function(){

$('div').eq(index).animate({

height:100,

top:300})

})if(i === notes.length -1){ //当我的i 等于了最后一个音符，这个时候要开始播放下一段了，间隔500ms

(

setTimeout(()=>{

play_yiju(sentences[count])

},500)

)

}

},500 *i)

}

}