W杯開幕までのJavascriptが欲しいと思ってウェブ上で発見した
スクリプトを拝借してきて少しコメントを変えて私のサイトに置きました。
でも、2,3変更したい点が有るのです。
私は素人ですのでどこをどうしたら良いかも分かりません。
本を借りてきて少しずつ勉強しているのですが、
できるなら早い内に完成させたいと思い
みなさんのお知恵を拝借させていただこうと思いました。
やりたいことはこうです。
1.秒数のリアルタイム表示
キックオフまで後何秒!という風にもカウントダウンしてみたいのです。
2.残り時間による表示切り替え
残り一日を切ったら「後何時間」という風に自動的に切り変えることはできないのでしょうか。
同様に分→秒→キックオフ→秒(経過)→分(経過)という風にできたら最高なのですが。
3.画像表示
カウンタの時間を画像で表示してみたいのです。
1から9までの数字を書いた画像を用意しておいて
残り365日なら3.gif,6.gif,5.gifと順に並べたいのです。
一度にたくさん質問してしまい申し訳有りません。
どうかよろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

私もよく利用する、JavaScriptのサンプルがたくさんあるページを紹介します。


ダウンロードが可能なサンプルの中に、
まさに、sibachuさんが欲しいものを実現したようなものがありましたよ。

以下のURLから「JavaScript講座」に入り、左のフレームにあるメニューをたどっていくと、
下のほうに「サンプルプログラム」というのがあります。
「時計」を選択すると時計に関するサンプルのリストが出てきますから、
その中の「3.目標の日時までの残り時間を表示します。」というのが
お望みのものではないでしょうか。
「3.3」は画像で表示できるように改良されていますよ。
「Preview」ボタンで実際に動いているところを確認できますから、ぜひ見てください。
「サッカーW杯日本開催まで」を着々とカウントダウンしていますよ。

テキストエディタで見ると、どこを修正すれば自分好みにカスタマイズできるか
細かく書かれていますので、修正も簡単だと思います。
質問用のBBSもありますし。
頑張ってくださいね。

参考URL:http://www2s.biglobe.ne.jp/~club_tom/
    • good
    • 0
この回答へのお礼

有り難うございました!まさにこれです!
どうせならJavascriptのことを少し勉強してみたいと
軽い気持ちで始めたのですが、これが大変!
0からのスタートなので何をどうしたら良いのかも分からない状態でした。
ただ、残念なことに私が愛用しているブラウザ「iCab」ではきちんと表示されないんですよね。
ブラウザ側の問題とは言えちょっと残念です。

お礼日時:2001/03/11 01:31

こんばんわぁ、Blackwinglsです。



-----引用開始-----
W杯開幕までのJavascriptが欲しいと思ってウェブ上で発見した
スクリプトを拝借してきて少しコメントを変えて私のサイトに置きました。
-----引用終了------

そのScriptがどのように書かれているかによって、どのようにScriptを書き直せばよいかが決まると思います。
同じ結果を出力するにしても人それぞれで書き方がかなり違ってきますからね。
与えられた情報のみからだと、一からScriptを組み直すような感じになってしまうので・・・・(^^;)

という訳で、差し障りが無かったらURLを補足してください。

ちなみに、基本的にお求めになってる機能はJavaScriptで実現可能だと思います。

ps おれ的には今度の連休は仕事なので、Scriptを書いてる時間がないかもしれない・・・・・・(T^T)

この回答への補足

早速回答をいただいたのに補足が遅くなってしまい申し訳有りません。
Javascriptを乗っけてあるページです。
http://members.tripod.co.jp/sibachu/
よろしくお願いいたします。

補足日時:2001/02/13 07:05
    • good
    • 0
この回答へのお礼

素早いレス どうも有り難うございました。
一応疑問が解決したので閉め切らせていただきました。
今後もお世話になるかも知れません。
その時はどうぞよろしくお願いします。

お礼日時:2001/03/11 01:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qjavascriptで何日何時間何分何秒経過

交通事故無事故無違反を会社のHPのTOPに貼りたいのです。

今日(6/1)から計測するとして、
今日だと
-無事故無違反「0」日経過しました。-
となり、明日になれば
-無事故無違反「1」日経過しました。-
とすることはあちこち探してできました。

でも、できれば、
-無事故無違反「dd」日「hh」時間「mm」分「ss」秒経過しました。-
としたいのですが、
「hh」時間まではできても、分・秒までのやり方・考え方がわかりません。

表示はできると思うのですが
分や秒はあくまで任意の日付(たとえば6月1日)から何千分・または何万秒たったかの表示に
なってしまいます。

経過時間を何日何時間何分何秒と表示するにはどうすればいいのでしょうか?

Aベストアンサー

経過病数をtimesとします。

分は、60(秒)*60(分)で時に繰り上がるので、
times % 3600
で分以下が計算できます。%は計算後の残りの値にしてくれます。
しかしこれには秒も含まれているので、秒の分は削ります。
times % 3600 / 60
これだと小数点が含まれることもあるので、
Math.floor(times % 3600 / 60);
で求めることができます。

秒は、60秒で分に繰り上がるので、
times % 60
で計算できます。

何日何時間何分何秒の場合は...。
分りやすく変数に入れてみますね。

var day = Math.floor(times / 86400);
var hour = Math.floor(times % 86400 / 3600);
var min = Math.floor(times % 3600 / 60);
var sec = times % 60;

alert(day+"日"+hour+"時間"+min+"分"+sec+"秒");

という感じになるのではないでしょうか。

経過病数をtimesとします。

分は、60(秒)*60(分)で時に繰り上がるので、
times % 3600
で分以下が計算できます。%は計算後の残りの値にしてくれます。
しかしこれには秒も含まれているので、秒の分は削ります。
times % 3600 / 60
これだと小数点が含まれることもあるので、
Math.floor(times % 3600 / 60);
で求めることができます。

秒は、60秒で分に繰り上がるので、
times % 60
で計算できます。

何日何時間何分何秒の場合は...。
分りやすく変数に入れてみますね。

var day = Math.floor(times / 86400);...続きを読む

Q残り時間カウントダウン表示 『あと○時間△分□秒』

CGIゲーム内であるイベントが発生してから12時間後に新イベントが自動発生するスクリプトを作りたいのですが

ネット検索をしても残り日数表示しかなくてサンプルがないので創ってみたのですが

<body onLoad="count()" onUnload="clearTimeout()">

$ENV{'TZ'} = "JST-9";
my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime(time); <=現在の時間

$date="0,0,11,3,0,107,0,27,0 485,197,854,"; <=保存されたプレイベント発生時間
foreach($date){ ($sc,$mi,$ho,$md,$mo,$ye,$wd,$yd,$isd)=split(/,/); }

print <<"EOM";

<SCRIPT language="JavaScript">
<!--
cnt = $sc-$sec;
cnt1=$mi-$min;
if($ho>$hour){cnt2=$ho-$hour-12;}
else{cnt2=$ho-$hour+12;}
if(cnt2>12){cnt2=cnt2-12;}
if(cnt<0){cnt=cnt+59; cnt1=cnt1-1;}
if(cnt1<0){cnt1=cnt1+59; cnt2=cnt2-1;}
if(cnt2<0){cnt=0;cnt1=0;cnt2=0;}

function count(){
document.form.box.value = cnt2+"時間"+cnt1+"分"+cnt+"秒";
cnt--;
if(cnt<0){cnt=cnt+60; cnt1=cnt1-1;}
if(cnt1<0){cnt1=cnt1+60; cnt2=cnt2-1;}
if(cnt2<0){cnt=0;cnt1=0;cnt2=0;}

if(cnt2 >=0) {
if(cnt1 >=0) {
if(cnt >=0) {
setTimeout("count()",1000);
}}}
}
//-->
</SCRIPT>

<FORM name="form">
あと<INPUT type="text" name="box" size="17">です
</FORM>
EOM

とりあえず表示はできた(と思う)のですがもっと楽で確実な方法はありますでしょうか?(モジュールとかは使わずに)

または上記のスクリプトすぐに思いつかなかったのでtime()で計算してたのですが
『残り53495秒』(適当)のような表記方法しか分かりません
これを○時間△分□秒のように変換してカウントダウンできるでしょうか?

localtime()、time()どちらでもいいのでご意見お願いします

CGIゲーム内であるイベントが発生してから12時間後に新イベントが自動発生するスクリプトを作りたいのですが

ネット検索をしても残り日数表示しかなくてサンプルがないので創ってみたのですが

<body onLoad="count()" onUnload="clearTimeout()">

$ENV{'TZ'} = "JST-9";
my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime(time); <=現在の時間

$date="0,0,11,3,0,107,0,27,0 485,197,854,"; <=保存されたプレイベント発生時間
foreach($date){ ($sc,$mi,$ho,$md,$mo,$ye,$wd...続きを読む

Aベストアンサー

こんにちは。

さてご質問にあった
----------------
『残り53495秒』
----------------
ですが、もし残り時間を「秒」で求める方法がおわかりになるのであれば、これ自体を「時・分・秒」に直してしまって表示したほうがシンプルになるのではないかな?と思いました。

残り「時間」 = (残り秒数÷3600)の整数部分
残り「 分 」 = ((残り秒数-(残り「時間」× 3600))÷ 60))の整数部分
残り「 秒 」 = 残り秒数-(残り「時間」× 3600)-(残り「 分 」× 60)

で変換できることと思います。ご検討を。

Qあるgif画像(A.gifとします)をキーボードの矢印キーの入力によっ

あるgif画像(A.gifとします)をキーボードの矢印キーの入力によって動かし、
A.gifが、配置してある別の画像(1~4.gif)と触れたときに、リンクへジャンプする、
といった仕掛けのWebサイトを、JavaScriptを利用して作りたいと思っています。

今のところ、A.gifが移動し、ある1点の座標(x,y)に重なったとき、リンクへジャンプするというプログラムはできたのですが、
ある一定の範囲にA.gifが触れたときにリンクへジャンプするという命令の方法がよくわからず、困っています。
つまり、範囲を点ではなく、四角にする方法が知りたいのです。
どなたかご教授願います。

Aベストアンサー

x, yは表示領域左上端からの最短距離が前提ですが
要素領域はxに要素の幅、yに高さを加算すれば割り出せます。

質問の肝である「一定の範囲」の算出ですが
位置移動する要素幅/高を取得し、そこから割り出せばよろしいかと。

簡単なサンプルを書いてみたので参考に。

<div id="move" style="position: absolute; width: 50px; height: 50px; background-color:yellow;">[move]</div>
<div id="area"style="position: absolute; left: 150px; top: 150px; width: 150px; height: 100px; background-color:yellow;">[area]</div>
<script type="text/javascript">
var moveObj = document.getElementById("move");
var areaObj = document.getElementById("area");

//領域取得オブジェクトを返す
function getRange(obj1, obj2) {
var obj1Width = obj1.offsetWidth; //位置移動要素幅を取得
var obj1Height = obj1.offsetHeight; //位置移動要素高を取得
var obj2Width = obj2.offsetWidth; //領域取得要素幅を取得
var obj2Height = obj2.offsetHeight; //領域取得要素高を取得
var obj2Left = obj2.offsetLeft; //領域取得要素左端距離を取得
var obj2Top = obj2.offsetTop; //領域取得要素上端距離を取得
return {
rangeX: { short: obj2Left - obj1Width, long: obj2Left + obj2Width },
rangeY: { short: obj2Top - obj1Height, long: obj2Top + obj2Height }
};
}

//領域取得オブジェクト生成
var Area = getRange(moveObj, areaObj);

function hoge(e) {
var doc = document.documentElement;
var body = document.body;
var X = !window.event ? e.pageX : event.x + doc.scrollLeft || body.scrollLeft;
var Y = !window.event ? e.pageY : event.y + doc.scrollTop || body.scrollTop;
moveObj.style.left = X + "px";
moveObj.style.top = Y + "px";

//接触判定
if (X >= Area.rangeX.short && X <= Area.rangeX.long
&& Y >= Area.rangeY.short && Y <= Area.rangeY.long) {
alert("!!");
}
}

document.onmousemove = hoge;
</script>

x, yは表示領域左上端からの最短距離が前提ですが
要素領域はxに要素の幅、yに高さを加算すれば割り出せます。

質問の肝である「一定の範囲」の算出ですが
位置移動する要素幅/高を取得し、そこから割り出せばよろしいかと。

簡単なサンプルを書いてみたので参考に。

<div id="move" style="position: absolute; width: 50px; height: 50px; background-color:yellow;">[move]</div>
<div id="area"style="position: absolute; left: 150px; top: 150px; width: 150px; height: 100px; background-col...続きを読む

Q10秒後に1秒ごとに1行づつ表示する方法

こんにちは。
質問がありまして、投稿致します。
タイトル通りなのですが、

10秒後に1秒毎に1行づつ表示する方法を探しております。
webで1秒毎に表示する方法は見つかりました。
ただ、10秒後に表示する方法が分からず困っております。
恐れ入りますが、ご指示頂けますと大変嬉しく思います。

---------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>TITLE</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
<SCRIPT type="text/JavaScript">

<!--
itv = 1000; // 表示する間隔(ミリ秒単位)
str = new Array();
// タグを入れる場合、「"」の前に「\」を付ける
str[1] = "<FONT color=\"#999999\" size=\"2\">test1</FONT>";
str[2] = "<FONT color=\"#999999\" size=\"2\">test2</FONT>";
str[3] = "<FONT color=\"#999999\" size=\"2\">test3</FONT>";
str[4] = "<FONT color=\"#999999\" size=\"2\">test4</FONT>";
str[5] = "<FONT color=\"#999999\" size=\"2\">test5</FONT>";
str[6] = "<FONT color=\"#999999\" size=\"2\">test6</FONT>";
str[7] = "<FONT color=\"#999999\" size=\"2\">test7</FONT>";
str[8] = "<FONT color=\"#999999\" size=\"2\">test8</FONT>";
str[9] = "<FONT color=\"#999999\" size=\"2\">test9</FONT>";

cnt = 0;
function setText() {
if (cnt >= str.length) return;
txt = "";
cnt++;
for (i=0; i<cnt; i++) txt += str[i] + "<BR>";
if (document.all) document.all["ID"].innerHTML = txt;
setTimeout("setText()",itv);

}

//-->
</SCRIPT>
</HEAD>

<BODY bgcolor="#000000" onLoad="setText()">
<DIV id="ID" style="position:absolute;"></DIV><BR>
</BODY>
</HTML>

---------------------------------------------------------------

恐れ入りますが、10秒後に最初の1行目(test1)を表示し1秒後に2行目(test2)を表示し、その後繰り返し1秒間隔でtest3→test4・・・と表示しようとしております。

長文大変申し訳ありません。
宜しくお願い致します。

こんにちは。
質問がありまして、投稿致します。
タイトル通りなのですが、

10秒後に1秒毎に1行づつ表示する方法を探しております。
webで1秒毎に表示する方法は見つかりました。
ただ、10秒後に表示する方法が分からず困っております。
恐れ入りますが、ご指示頂けますと大変嬉しく思います。

---------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text...続きを読む

Aベストアンサー

#1です。すみませんm(--)m

よく見て無かったです。10秒後から1秒ずつでしたね(><)
Firefoxで出なかったのでdocument.getElementByIdを付け加えましたm(--)m

cnt = 0;
function setText() {
if(cnt == "0") { clearTimeout(tID); }
if (cnt >= str.length) return;
txt = "";
cnt++;
for (i=0; i<cnt; i++) txt += str[i] + "<BR>";
if (document.all) { document.all["ID"].innerHTML = txt; }
else { document.getElementById("ID").innerHTML = txt; }
setTimeout("setText()",itv);

}

//-->
</SCRIPT>
</HEAD>

<BODY bgcolor="#000000" onLoad="tID=setTimeout('setText()',10000);">
<DIV id="ID" style="position:absolute;"></DIV><BR>

#1です。すみませんm(--)m

よく見て無かったです。10秒後から1秒ずつでしたね(><)
Firefoxで出なかったのでdocument.getElementByIdを付け加えましたm(--)m

cnt = 0;
function setText() {
if(cnt == "0") { clearTimeout(tID); }
if (cnt >= str.length) return;
txt = "";
cnt++;
for (i=0; i<cnt; i++) txt += str[i] + "<BR>";
if (document.all) { document.all["ID"].innerHTML = txt; }
else { document.getElementById("ID").innerHTML = txt; }
setTimeout("setText()...続きを読む

Q親→子1→子2→親のデータ渡し

1.親ウィンドウからサブウィンドウ1を開く。
2.サブウィンドウ1でsubmitボタンを押すと値が  window.openerで親に渡り更にサブウィドウ2が開く。

ここまでは、出来るのですが

3.サブウィンドウ2でsubmitボタンを押して値を親ウィンドウに渡すにはどうしたらよいでしょうか?

ここでwindow.openerを使うとサブウィンドウ1が親ウィンドウと判断してしまい上手くいきません。

上手い方法があれば教えて下さい。

Aベストアンサー

試してませんが・
window.opener.opener するか
window.open するときにwindow.opener.open するとか


このカテゴリの人気Q&Aランキング

おすすめ情報