- 締切済み
Javascriptで時刻に応じて画像を変えることはgetHoursや
Javascriptで時刻に応じて画像を変えることはgetHoursやifなどを使って実現できますが、その変化の種類を多くしたいと思っています。しかしながら、変化の種類を多くするとif文がだらだらと続くことになり、非常にややこしくなります。 そこで、 （時刻,画像名） 1200,a 1204,b 1209,c 1211,b 1215,d 1234,a のように簡略的なものを書くだけで「時刻」になったら「画像名」の画像に切り替わる、といったことはできますか。もちろん書式は上のようなものでなくてもかまいません。簡略化できれば何でもよいです。
- reportpad7
- お礼率67% (53/78)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
4バイト時刻、1バイトファイル名の固定長データで作ってみました。 （新しいブラウザなら字数で処理するので全角でも行けると思います） 最初にデフォルト値として0000a、最後に99999（2400zでも可）を付加して下さい。 <script> var data='0000a1200a1204b1209c1211b1215d1234a99999'; function chg(){ var d=new Date(),t=+(''+d.getHours()+d.getMinutes()); var n=0; while(n<data.length){ if(+data.substr(n,4)>=t){ document.images[0].src=data.substr(n-1,1)+'.jpg'; break; } n+=5; } } setInterval('chg()',1000); </script> これをNo.1風にアレンジ。（setInterval残して。こっちは未検証） <script> function chg(){ for( var d=new Date(),res='0000a1200b1204c1209d1211e1215f1234g99999',t=+(''+d.getHours()+d.getMinutes()),n=0; +res.substr(n,4)<t; n+=5); document.images[0].src=res.substr(n-1,1)+'.jpg'; } setInterval('chg()',1000); </script> ていうか、with(new Date)なんて書き方が出来るのは知らなかった。
- fujillin
- ベストアンサー率61% (1594/2576)
スクリプトは長いけど… 最初に、全部のタイマーをセットするタイプ。 <html> <head><title>test</title> <script type="text/javascript"> window.onload = function() { var data = [ '1200,a', '1204,b', '1209,c' ]; var i = 0, d, dv, dt; while (d = data[i++]) { dv = d.split(','); dt = new Date(); dt.setHours(0|dv[0].substr(0,2)); dt.setMinutes(0|dv[0].substr(2,2)); dt.setSeconds(0); if (dt - new Date()<0) dt.setDate(dt.getDate() + 1); d = dt - new Date(); setTimeout(timerSet(dv[1]), d); } } function timerSet(u) { return function(){ document.getElementById('target').src = u + '.jpg'; } } </script> </head> <body> <img id="target" src="x.jpg" alt="test"> </body> </html> setTimeoutで多少の時間誤差がでる可能性はある。 正確にしたければ、少し早めに呼び出して、設定時刻との差を縮めてゆくようにすれば、望みの誤差範囲内にすることが可能。 でも、所詮ローカルマシンのタイマーで測っているので、そこまでの正確性は必要ないでしょう。
- babu_baboo
- ベストアンサー率51% (268/525)
間違えてた。もっと簡略化。 with(new Date)for(var a='0,a,1204,b,1209,c,1211,b,1215,d,1234,b,2400,z'.split(','),c=0,n=getHours()*100+getMinutes();+a[c+=2]<n;);document.getElementById('id').src=a[c-1]+'.png';
- yambejp
- ベストアンサー率51% (3827/7415)
＞簡略化 じゃっかん効率は悪いですが、以下でもいけます <script> var dList={"1200":"1.jpg","1204":"2.jpg","1209":"3.jpg","1211":"1.jpg","1215":"2.jpg","1234":"3.jpg"}; setInterval(function(){changeImg()},1000); function changeImg(){ var d=new Date(); var h=d.getHours(); var m=d.getMinutes(); var str=h.toString()+m.toString(); if(dList[str]) document.getElementById("hoge").src=dList[str]; } </script> <img src="1.jpg" id="hoge">
- babu_baboo
- ベストアンサー率51% (268/525)
var a='0,a,1204,b,1209,c,1211,b,1215,d,1234,a,2400,z'.split(',') var c=2,d=new Date,n=d.getHours()*100+d.getDate(); while(+a[c]<n)c+=2; document.getElementById('id').alt=a[c-1]+'.png';
