JavaScriptで、画面上に現在の時刻を表示させたいのですが、
<HEAD>
<script type="text/javascript">
<!--
function jikoku() {
dd = new Date();
document.F1.T1.value = dd.toLocaleString();
window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</HEAD>
<BODY onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
</BODY>
</HTML>
とタグを打つと、「西暦/月/日にち/曜日/時刻/~」
と細かく出てきてしまいます。
ほんとうは、時刻以下、曜日から西暦までは必要ないんです。
現在時刻のみ(23:25:31)といった具合に×時×分×秒
の部分だけ表示させたいんです。
どうしたらいいか、教えてください。
お願いします。
No.6ベストアンサー
- 回答日時:
たびたび失礼します。
補足されたソースを実際に試してみたのですが、やはりこちらでは現象が再現しませんでした…
現象自体がちょっと掴みきれていないので、これが適切な回避方法になるかどうかはわからないのですが、前回のものからもう少し手を入れて、表示方法を変えたスクリプトを組んでみましたので、こちらをお試しいただけますか?
こちらの方法はいわゆるDHTML的手法を使ったものになります。
<HTML>
<HEAD>
<script type="text/javascript">
<!--
br0=navigator.userAgent;
if (br0.match(/Opera/i)){
if (br0.match(/[0-6].[0-9][0-9]/)){
br=1;
}
}
else {br=0;}
/* Opera対策:Opera 6.xxのDOMの実装が不完全なので、それらをはじくために利用。 */
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+"\"";
if (document.getElementById && br!=1){
ntime=ntime.replace(" "," \;");
document.getElementById("clock").innerHTML= ntime;}
else {document.F1.T1.value = ntime;}
window.setTimeout("jikoku()", 1000);
}
// -->
</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">に対してスタイルシートを適用することも可能です。
ただ、古いブラウザは、この改めて盛り込んでみた手法に対応していないので、従来のフォームの中に時刻を表示させる仕掛けも残して、古いブラウザでも表示できるようにしてあります。
解決しなかったら、ごめんなさい。
でっきました~♪
すごいですね~!!!(@@)
天才です!!
ほんとに(!)、どうもありがとうございますm(__)m
かなり感動してます!
アリガトウ!!
もっと勉強して精進せねば。。。。
No.5
- 回答日時:
すみません。
「数字の周りのブルーの外枠」が指している意味が掴みきれていないので、不適当な回答になってしまっていたかもしれません。こちらで表示させている限りでは、ここで挙げられているソースを表示させた時に、数字の周りにはブルーの枠が出ていないんです…
もしよろしければ、そのブルーの外枠が出ているページのHTMLソースと、使用しているのでしたらCSSのソースを補足していただけませんか? こちらでも同じソースを用意しないと、ちょっと的確な回答ができないかもしれませんので…
もちろん、ページタイトルや文章の内容、リンク先のURLなどはすべて隠して構いません。 ソースだけを開示していただければ十分です。
本当に、わざわざスミマセンm(__)m
ありがとうございます。。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<script type="text/javascript">
<!--
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);
}
// -->
</script>
</HEAD>
<BODY onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=10 style="border-style: none;">
</form>
</BODY>
</HTML>
・・デス。
No.4
- 回答日時:
補足読みました。
数字の周りのブルーの外枠というのは、input要素の入力欄の枠のことでしょうか?
それでしたら、スタイルシートで境界線を表示させないように指定すれば消せると思います。 文字色・背景色などについても、スタイルシートで指定できると思います。
境界線を消すには、「<input type="text" name="T1" size=50>」この部分を、
<input type="text" name="T1" size=50 style="border-style: none;">
とすればよいと思います。
なお、入力欄へのスタイルシートは、IE 6とNetscape 7では反映されることを確認しましたが、他のブラウザでは反映されない場合もあります。
見当違いでしたらごめんなさい。
No.3
- 回答日時:
No1です。
間違えてしまいました。
時刻だけでしたよね。
<script type="text/javascript">
<!--
function jikoku(){
myDate=new Date();
myHour=myDate.getHours();
myMinute=myDate.getMinutes();
mySecond=myDate.getSeconds();
if (myHour<10) {myHour="0"+myHour}
if (myMinute<10) {myMinute="0"+myMinute}
if (mySecond<10) {mySecond="0"+mySecond}
document.myform1.myclock.value=" "+myHour+"時"+myMinute+"分"+mySecond+"秒";
setTimeout("jikoku()",1000);
}
//-->
</script>
たびたび、どうも、すみませんm(__)m
ソースがちょっと違ったので、デザインが変わるのかも~って思って(前の人のをコピーしたらできたんdすが)一応やってみたら、、、、数字、消えました。。(ーー;
でも、度々教えてくださって、どうもありがとうございますm(__)m
No.2
- 回答日時:
.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桁台の値が表示される場合に表示がずれるのを防ぐ意味で、少しスクリプトに手を加えてみました。 このような感じではいかがでしょうか?
参考になれば幸いです。
できました!
ありがとうございます。
それから、数字の周りにブルーの外枠ができてしまうんですが、
それはどうやったら取り外すこと、できるんでしょか?
お願いしますm(__)m
No.1
- 回答日時:
<script type="text/javascript">
<!--
function jikoku() {
dd = new Date();
document.F1.T1.value = dd.toLocaleString();
window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</head>
<body onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
</body>
でどうでしょう?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- PHP php ログイン 1 2022/11/01 00:24
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VBScriptでpingを実行(ブラウザ...
-
テキストエリアの制限字数以上...
-
[JavaScript]ボタンを押下する...
-
SHIFT + TABキーの...
-
指定時間からの経過時間をリア...
-
HTMLとJavaScriptで作った表示...
-
FireFoxでfocus()が上手く動かない
-
一度もフォーカスされないテキ...
-
入力した文字をステータスバー...
-
GetElementByIdがうまく取得で...
-
フォーカスが外れた時の入力チ...
-
テキストボックスに初期値で1...
-
tabindexの取得
-
フォーム内で記入したクエリ送...
-
正規表現で複数マッチ条件で悩...
-
【javascript・PHP】プルダウン...
-
javascriptでセレクトボックス...
-
Jvasvriptのlengthで個数が取得...
-
return trueとreturn falseの用...
-
ラジオボタンの選択で解答・点...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TextBoxに半角数字以外を入れた...
-
HTMLとJavaScriptで作った表示...
-
tabindexの取得
-
VBscriptの配列変数をJavascrip...
-
プルダウンで選択された値を別...
-
フォームの内容でリンク先URLの...
-
テキストボックスに入力した色...
-
JavaScriptで作ったアプリが正...
-
GetElementByIdがうまく取得で...
-
HTMLファイル同士での値渡し
-
jQueryのdatepickerの日付が選...
-
マイナスなら赤字で表示したい...
-
VBSからjavascript
-
テキストエリアに履歴を残したい
-
どちらかひとつのテキストボッ...
-
一部Enter無効化の方法を教えて...
-
ページ間で変数を保持したい
-
Request.Form(key)の中身をクリ...
-
javascriptのちょっとした動作...
-
JSで一つのボタンを押したとき...
おすすめ情報