現在時刻を表示させたい！

解決済

質問者：monti55
質問日時：2003/04/21 23:30
回答数：6件

JavaScriptで、画面上に現在の時刻を表示させたいのですが、
<HEAD>
<script type="text/javascript">

</script>

</HEAD>

<BODY onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
</BODY>
</HTML>

とタグを打つと、「西暦/月/日にち/曜日/時刻/～」
と細かく出てきてしまいます。

ほんとうは、時刻以下、曜日から西暦までは必要ないんです。

現在時刻のみ（23:25:31)といった具合に×時×分×秒
の部分だけ表示させたいんです。

どうしたらいいか、教えてください。

お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： lead1976
回答日時：2003/04/23 17:15

たびたび失礼します。

補足されたソースを実際に試してみたのですが、やはりこちらでは現象が再現しませんでした…
現象自体がちょっと掴みきれていないので、これが適切な回避方法になるかどうかはわからないのですが、前回のものからもう少し手を入れて、表示方法を変えたスクリプトを組んでみましたので、こちらをお試しいただけますか?
こちらの方法はいわゆるDHTML的手法を使ったものになります。

<HTML>
<HEAD>
<script type="text/javascript">

</script>
</HEAD>
<BODY onload="jikoku()">

<div id="clock">
<form name="F1" action="#">
<input type="text" name="T1" size=50 style="border-style: none;">
</form>
</div>

</BODY>
</HTML>

こちらの方法では、フォーム内に結果を表示するのではなく、<div id="clock">の中のHTMLをJavaScriptから書き換えてやることで時刻の表示をするようになっています。
なお、<div id="clock">に対してスタイルシートを適用することも可能です。
ただ、古いブラウザは、この改めて盛り込んでみた手法に対応していないので、従来のフォームの中に時刻を表示させる仕掛けも残して、古いブラウザでも表示できるようにしてあります。

解決しなかったら、ごめんなさい。

- 0
- 件

通報する

この回答へのお礼

でっきました～♪
すごいですね～！！！（＠＠）
天才です！！
ほんとに（！）、どうもありがとうございますｍ（＿＿）ｍ
かなり感動してます！
アリガトウ！！
もっと勉強して精進せねば。。。。

通報する

お礼日時：2003/04/24 20:07

No.5

回答者： lead1976
回答日時：2003/04/22 01:14

すみません。

「数字の周りのブルーの外枠」が指している意味が掴みきれていないので、不適当な回答になってしまっていたかもしれません。
こちらで表示させている限りでは、ここで挙げられているソースを表示させた時に、数字の周りにはブルーの枠が出ていないんです…

もしよろしければ、そのブルーの外枠が出ているページのHTMLソースと、使用しているのでしたらCSSのソースを補足していただけませんか? こちらでも同じソースを用意しないと、ちょっと的確な回答ができないかもしれませんので…
もちろん、ページタイトルや文章の内容、リンク先のURLなどはすべて隠して構いません。ソースだけを開示していただければ十分です。

- 0
- 件

通報する

この回答へのお礼

本当に、わざわざスミマセンｍ（＿＿）ｍ
ありがとうございます。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<script type="text/javascript">

</script>

</HEAD>
<BODY onload="jikoku()">

<form name="F1" action="#">
<input type="text" name="T1" size=10 style="border-style: none;">
</form>

</BODY>

</HTML>

・・デス。

通報する

お礼日時：2003/04/23 02:27

No.4

回答者： lead1976
回答日時：2003/04/22 00:52

補足読みました。

数字の周りのブルーの外枠というのは、input要素の入力欄の枠のことでしょうか?
それでしたら、スタイルシートで境界線を表示させないように指定すれば消せると思います。文字色・背景色などについても、スタイルシートで指定できると思います。
境界線を消すには、「<input type="text" name="T1" size=50>」この部分を、

<input type="text" name="T1" size=50 style="border-style: none;">

とすればよいと思います。
なお、入力欄へのスタイルシートは、IE 6とNetscape 7では反映されることを確認しましたが、他のブラウザでは反映されない場合もあります。

見当違いでしたらごめんなさい。

- 0
- 件

通報する

この回答へのお礼

ブラウザ、IE6だけれど、
できなかった（；；）

通報する

お礼日時：2003/04/22 00:58

No.3

回答者： poku98
回答日時：2003/04/22 00:34

No１です。

間違えてしまいました。
時刻だけでしたよね。
<script type="text/javascript">

</script>

- 0
- 件

通報する

この回答へのお礼

たびたび、どうも、すみませんｍ（＿＿）ｍ
ソースがちょっと違ったので、デザインが変わるのかも～って思って（前の人のをコピーしたらできたんｄすが）一応やってみたら、、、、数字、消えました。。（ーー；

でも、度々教えてくださって、どうもありがとうございますｍ（＿＿）ｍ

通報する

お礼日時：2003/04/22 00:37

No.2

回答者： lead1976
回答日時：2003/04/21 23:54

.getHours()、.getMinutes()、.getSeconds()メソッドをそれぞれ利用すればよいと思います。

実例を挙げます。

function jikoku() {
now = new Date();
hr = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();
hr = hr.toString();
min = min.toString();
sec = sec.toString();
if (10>hr){hr = " "+hr;}
if (10>min){min = "0"+min;}
if (10>sec){sec = "0"+sec;}
ntime=hr+":"+min+"\'"+sec+"\"";
document.F1.T1.value = ntime;
window.setTimeout("jikoku()", 1000);
}

質問文中のスクリプトを元にしましたが、1桁台の値が表示される場合に表示がずれるのを防ぐ意味で、少しスクリプトに手を加えてみました。このような感じではいかがでしょうか?

参考になれば幸いです。

- 0
- 件

通報する

この回答へのお礼

できました！
ありがとうございます。

それから、数字の周りにブルーの外枠ができてしまうんですが、
それはどうやったら取り外すこと、できるんでしょか？

お願いしますｍ（＿＿）ｍ

通報する

お礼日時：2003/04/22 00:34

No.1

回答者： poku98
回答日時：2003/04/21 23:43

<script type="text/javascript">

</script>
</head>
<body onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
</body>

でどうでしょう？