現在の時刻での15分ごとの最新の画像を表示されるようにしたい

Question

実現したいこと

ウェブページで現在の時刻での15分ごとの最新の画像を表示されるようにしたいです。
そのために、部分的にURLを変える必要があります。
http://example.jp/live/image/20190816/1230/livecamera.jpg
↓
http://example.jp/live/image/20190816/1245/livecamera.jpg
↓
http://example.jp/live/image/20190816/1300/livecamera.jpg
↓
http://example.jp/live/image/20190816/1315/livecamera.jpg

変わる内容は以下です。
年月日
YYYYMMDD（今日の年月日）
時刻
(0000|0015|0030|0045|0100|0115|0130|0145|0200|0215|0230|0245|0300|0315|0330|0345|0400|0415|0430|0445|0500|0515|0530|0545|0600|0615|0630|0645|0700|0715|0730|0745|0800|0815|0830|0845|0900|0915|0930|0945|1000|1015|1030|1045|1100|1115|1130|1145|1200|1215|1230|1245|1300|1315|1330|1345|1400|1415|1430|1445|1500|1515|1530|1545|1600|1615|1630|1645|1700|1715|1730|1745|1800|1815|1830|1845|1900|1915|1930|1945|2000|2015|2030|2045|2100|2115|2130|2145|2200|2215|2230|2245|2300|2315|2330|2345)

例えば、ページにアクセスしたときの時刻が2019年08月16日15時25分だった場合は、
http://example.jp/live/image/20190816/1515/livecamera.jpg
ページにアクセスしたときの時刻が2019年08月16日15時40分だった場合は、
http://example.jp/live/image/20190816/1530/livecamera.jpg
の画像が表示されるようにしたいです。

現在の時刻での最新の画像を表示されるようにしたいです。
プログラム言語はJavaScriptがいいですが、ほかの言語でも大丈夫です。

今考えているコードがありますので、参考にしてください。

コードで実行された結果を表示するコードもよくわからないので、教えていただけると幸いです。
こんな感じでしょうか。
<img id="#img" src="http://example.jp/live/image/20190816/1230/livecamera.jpg" style="width: 100%;">

ソースコード

<script type="text/javascript">
				var currentDate = new Date();
				currentDate.setMinutes(currentDate.getMinutes() - 15);

				var justMin = parseInt($.format.date(currentDate, "mm"), 10);
				justMin = justMin - justMin % 15;
				
				camera.url = camera.url.replace( /yyyyMMdd/g , $.format.date(currentDate, "yyyyMMdd"));
				camera.url = camera.url.replace( /hhmm/g , $.format.date(currentDate, "HH") + ("0" + justMin).slice(-2));
				break;

			default:
				break;
		}
				if(data[0].match(/200/)) {
			        $("img").attr("src", camera.url + "?" + (new Date()).getTime());
		}
		
	};
</script>

よろしくお願いいたします。

Comments

[m.ts10806]

現状提示されているコードの問題点は何でしょうか。
それとも「このコードを参考にして作ってください」という作業依頼でしょうか。(となると質問ではないですね)

Answer 1

window.onload = function() {
  var time= new Date();
  var year = time.getFullYear();
  var month = ("0"+(time.getMonth() + 1)).slice(-2);
  var date = ("0"+time.getDate()).slice(-2);
  var hour = ("0"+time.getHours()).slice(-2);
  var minute = time.getMinutes();
  var minute = Math.floor(minute / 15);
  if ( minute == 0 ) {
    var minute = '0' + minute;
  } else {
    var minute = minute * 15;
  }
  document.getElementById("image15").src = 'http://example.jp/live/image/'+year+month+date+'/'+hour+minute+'/livecamera.jpg';
}

確か#ってIDに使えなかったからimage15っていうIDのついたimgタグのsrcを書き換えるように作りました。
なんとなく思いつきで書いたのでもっと良い書き方あるかもしれません。

追記

window.onload = function() {
  var stime= new Date();
  var time = new Date(stime.getTime() - 540000);
  var year = time.getFullYear();
  var month = ("0"+(time.getMonth() + 1)).slice(-2);
  var date = ("0"+time.getDate()).slice(-2);
  var hour = ("0"+time.getHours()).slice(-2);
  var minute = time.getMinutes();
  var minute = Math.floor(minute / 15);
  if ( minute == 0 ) {
    var minute = '0' + minute;
  } else {
    var minute = minute * 15;
  }
  document.getElementById("image15").src = 'http://example.jp/live/image/'+year+month+date+'/'+hour+minute+'/livecamera.jpg';
}

Comments

[live1]

回答ありがとうございます。
実現したいことができました。
本当にありがとうございました！

[live1]

こんなことは可能でしょうか。
画像がサーバーに送られるのが9分後になるので、
9分程度見られない時間が発生してしまいます。
そのため、6時6分にアクセスしたとき、
0545の画像を表示するようにする。
6時10分にアクセスしたときは0600の画像を表示する。
どの部分を変更したらそのようなことができるでしょうか。
よろしくお願いします。

[kyoya0819]

追記しました。
まぁまさか「コピペ」して使わないと思うのできちんと理解してからご利用ください。

[live1]

ありがとうございます。
勉強になりました。