※ ChatGPTを利用し、要約された質問です(原文:時間で画像が切り替わらず困っています。)
時間で画像が切り替わらず困っています。
このQ&Aのポイント
時間で表示画像が切り替わるソースをダウンロードして試しています。
画像ファイルはindex.htmlと同じ階層に置くことになっていますが、別フォルダで管理したいです。
2:55にアクセスしたときに表示されている画像が、2:56になっても新しい画像にならずずっとそのままなのです。お分かりの方ぜひ教えてください。
時間で表示画像が切り替わるソースをダウンロードして試しています。
そのソースは↓これです。
http://sky.geocities.jp/minamox/jibun-tokei/
画像ファイルはindex.htmlと同じ階層に置くことになっていますが、別フォルダで管理したいです。そこで「clockimg」というフォルダを作って画像を入れ、index.htmlの8行目を変更してみました。(変えた箇所は下に書きました)が、うまくいきません。
たとえば2:55にアクセスしたときに表示されている画像が、2:56になっても新しい画像にならずずっとそのままなのです。他にも変更する箇所があるのかなと思ってますが、分からないで困っています。お分かりの方ぜひ教えてください。よろしくお願いします。
▼ソースはこれです。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
function getImageFile(date){
var dir = './clockimg/';【←ここに「clockimg」を追記しました】
var ext = 'jpg';
var hour = date.getHours();
if(hour < 10){
hour = '0' + hour;
}
var minute = date.getMinutes();
if(minute < 10){
minute = '0' + minute;
}
return dir + hour + minute + '.' + ext;
}
function updateClock(){
var date = new Date();
var image = getImageFile(date);
date.setTime(date.getTime() + 60 * 1000);
var next_image = getImageFile(date);
$('#clock').fadeOut(1000, function(){
$('#clock')
.html('<img src="' + image + '"><img src="' + next_image + '" style="display:none;">')
.fadeIn(1000);
});
setTimeout('updateClock()', 60 * 1000);
}
$(document).ready(function(){
updateClock();
});
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
お礼
いろいろ調べて判明しました。 このスクリプトはPCの時計に合わせて画像も変わると思ってましたが、どうやらアクセスした時間から60秒をカウントして変わるようです。だから2:56になってもすぐ変わらなかったんだと思います。少し気長に見ていればもっと早く気付いたのに(^-^; 何はともあれご回答ありがとうございました!