jQueryの===実現ピアノの効果
<！DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> </ TITLE>
<スタイル>
のdiv {
高さ：100pxに。
幅：100ピクセル;
位置：絶対;
左：300ピクセル;
トップ：300ピクセル;
背景：赤;
}
DIV：n番目 -of型（2 ）{
左：400ピクセル。
背景：オレンジ;
}
DIV：n番目 -of型（3 ）{
左：500pxなど。
背景：黄色;
}
DIV：n番目 -of型（4 ）{
左：600PX。
背景：緑;
}
DIV：n番目 -of型（5 ）{
左：700px;
背景：＃1 0FF。
}
DIV：n番目 -of型（6 ）{
左：800ピクセル。
背景：青;
}
DIV：n番目 -of型（7 ）{
左：900px;
背景：紫;
}
</スタイル>
</ head>
<body>
<div> </ div>
<div> </ div>
<div> </ div>
<div> </ div>
<div> </ div>
<div> </ div>
<オーディオSRC = "オーディオ/ 1.mp3"> </オーディオ>
<オーディオSRC = "オーディオ/ 2.mp3"> </オーディオ>
<オーディオSRC = "オーディオ/ 3.mp3"> </オーディオ>
<オーディオSRC = "オーディオ/ 4.mp3"> </オーディオ>
<オーディオSRC = "オーディオ/ 5.mp3"> </オーディオ>
<オーディオSRC = "オーディオ/ 6.mp3"> </オーディオ>
<オーディオSRC = "オーディオ/ 7.mp3"> </オーディオ>
<スクリプトSRC = "jqueryの-3.4.1.min.js"> </ SCRIPT>
ます。<script type = "text / javascriptの"> // ウィンドウ点击、自动播放VAR音楽= '1155665 4433221 5544332 5544332 1155665 4433221' ;
var文= music.split（」 " ）;
$（ウィンドウ）.on（ 'クリック'、機能（）{
play_yiju（文章[ 0 ]）
}）
ヴァール COUNT = 0; //は時間の証明を再生する場合に実行、機能現在の再生を示すために使用されます。
関数play_yiju（Yiju）{
IF（COUNT === sentences.length）{ // 私のカウンターは、私は=すべての音楽の長さ、完成演奏、リターン証明
リターンは、
}
COUNT ++ // プレー一度++ COUNT
// 取得文字の各1内部の、インデックスのdiv関係、オーディオインデックスとの関係がある
// すべてのノート内の一つ一つを取得
するvar注意= yiju.splitは、（「」）; // 取得は、各ノートが含まれますアレイ
// アレイを横断
するため（LET I = 0; Iはnotes.length <; I ++は）{
//2回目の呼び出しの後の最初のノートのインデックスを,,取得し、その後、あなたがsetTimeout関数を使用したいので、ここで、音楽の効果を形成するために、500ミリ秒後に、独自のオーディオを呼び出す
// 第一、第二1 0 * 500 *それがあるべきように、2 * 500ミリ秒間隔@第三選手の後、500ミリ秒を再生した後、私は* 500
のsetTimeout（関数（）{
// インデックスとオーディオに対応するdiv要素のインデックスを取得
VAR指数を=注意事項[I] -1 ;
// ロード・オーディオ
$（ 'オーディオ' ）[インデックス] .LOAD（）;
// オーディオを再生
$（ 'オーディオ' ）[インデックス] .play（）;
// div要素をアニメーション化する
$（ 'div要素を' ）。 EQ（インデックス）.animate（{
高さ： 300 、
トップ： 100
}、関数（）{
$（ 'div要素' ）.EQ（インデックス）.animate（{
高さ： 100 、
トップ： 300
}）
}）
IF（I === notes.length -1）{ // I iは、最後の音符に等しい場合、この時間は、次のセグメントの再生を開始するために、間隔500ミリ秒
（
のsetTimeout（（） => {
play_yiju（文章[COUNT]）
}、 500 ）
）
}
}、 500 * I）
}
}
</ SCRIPT>
</ body>
</ HTML>