今回は、毎時間、毎時間、htmlページで音楽を再生するプロジェクトに取り組んでいます。事はです。 。毎時間別の曲が再生されます。うんつまり、自分のHTMLに24種類の<audio>
タグがあることを意味します(コードを少なくする方法がないと仮定しても問題ありません)。さて、物事が面倒な部分は、JavaScriptにあります。ここで私のコードは毎回各曲を再生させることです。Javascriptで繰り返しコードを避ける?
var curHour = new Date().getHours(); //finds the current hour
//grabs the music
var music1 = document.getElementById('music1');
\t var music2 = document.getElementById('music2');
\t var music3 = document.getElementById('music3');
\t var music4 = document.getElementById('music4');
\t var music5 = document.getElementById('music5');
\t var music6 = document.getElementById('music6');
\t var music7 = document.getElementById('music7');
\t var music8 = document.getElementById('music8');
\t var music9 = document.getElementById('music9');
\t var music10 = document.getElementById('music10');
\t var music11 = document.getElementById('music11');
\t var music12 = document.getElementById('music12');
\t //etc. etc. etc.
//tells the music when to play
\t if (curHour === 1) {
\t \t music1.play();
\t }
\t else if (curHour === 2) {
\t \t music2.play();
\t }
\t else if (curHour === 3) {
\t \t music3.play();
\t }
//etc. etc. etc.
あなたが見ることができるように、このコードはあまりにも繰り返しそうです! コードをクリーンアップしようとすると、私はfor()
ループを試しましたが、私がやっていたやり方が曲を(変数の形で)伝えることを理解する前に、不可能な遊び。
var grab = document.getElementById;
var hourMusic = [grab('music1'), grab('music2')];
if (curHour === 10) {
hourMusic[0].play()
}
else {
hourMusic[1].play()
}
これは動作しませんでした: は、私はまたの線に沿って何かをしようとしました。 。 。私はそれを見ると、それがうまくいくと思うような私のほんの少しばかばかしいように思えます。しかし、ちょっと、少なくとも私は試みたと言うことができます(おそらくdocument.getElementByIdを変数に保存することはできませんが)。
ヒント: 'のdocument.getElementById( "音楽" + curHour).play()'。 – Xufox
ヒント: 'var music = new Array(12); – Tibrogargan
最後のコードの短いブロックに関して、それは動作しません。なぜなら、Xufoxは配列をまったく必要としないことを意味するからです。 'grab'機能の一部です。もしそれを 'var grab = document.getElementById.bind(document);'に変更した場合や 'document.getElementById()'を直接使用した場合は正しく動作するはずです。しかし、その機能へのショートカットを使用するかどうかは、あなたがここで実装しようとしているところから気をそらすだけです。 – nnnnnn