- 締切済み
javascriptでの時刻表示カスタム
ホームページを作れと言われた普通のOLです。 htmlとcssは少しだけ触れますが、javascriptは......(T_T) 知人や知り合いの社員共々聞きましたが全滅です..... 本題ですが、javascriptで現在時刻を取得し、それをそれぞれの要素へ反映させたいです。 例えば、 <div class="smample">??月??日??時??分</div>←現在の時刻-3分 <div class="smample">??月??日??時??分</div>←現在の時刻-4分 <div class="smample">??月??日??時??分</div>←現在の時刻 <div class="smample">??月??日??時??分</div>←現在の時刻-15分 <div class="smample">??月??日??時??分</div>←現在の時刻-4分 という具合に表示できれば最高です。 基本的な時刻表示（下記記載のスクリプト）で試行錯誤しましたが、 ??月??日??時5分の場合、-6分とすると「分」の所の表示が0-1となってしまいます。 更に、-4分/-5分といった複数指定もできません。 javascriptにお詳しい方、どうかご教授下さい。 正直凄く困ってます。。。。 <script type="text/javascript"> var get_current_timestamp = function() { var weeks = new Array('日', '月', '火', '水', '木', '金', '土'); var d = new Date(); // 年月日・曜日・時分秒の取得 var month = d.getMonth() + 1; var day = d.getDate(); var week = weeks[ d.getDay() ]; var hour = d.getHours(); var minute = d.getMinutes() - 6; var second = d.getSeconds() + 10; // 1桁を2桁に変換する if (month < 10) {month = "0" + month;} if (day < 10) {day = "0" + day;} if (hour < 10) {hour = "0" + hour;} if (minute < 10) {minute = "0" + minute;} if (second < 10) {second = "0" + second;} // 整形して返却 return d.getFullYear() + "/" + month + "/" + day + "（" + week + "） " + hour + ":" + minute + ":" + second; } // 現在の日付・時刻を表示する document.write(get_current_timestamp()); </script>
- websummery
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- Gotthold
- ベストアンサー率47% (396/832)
> リアルタイムに表示させなくしたいのですが、できますか...? setIntervalで更新しているだけなので、 setIntervalを使わないように直せば良いです。
- fujillin
- ベストアンサー率61% (1594/2576)
どのような使い方をなさるのかよくわからないのですが、taimestampという名称とご提示のコードから見て、1回だけ表示すればよさそうと勝手に想像ました。 文書内のclass="timeStamp"となっているdiv要素（<div class="timeStamp">）を対象として、それぞれの要素内に当初記述してある時間差に応じた時刻を上書きするというサンプルです。 時間差の指定は [+|-] [時間] [分] [秒]で、それ以外の文字がある場合は、class="timeStamp"となっていても何もしません。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> </head> <body> <div class="timeStamp">-3分</div> <div class="timeStamp">-4分</div> <div class="timeStamp">0</div> <div class="timeStamp">-15分</div> <div class="timeStamp">1時間30分</div> <script type="text/javascript"> (function(){ var toNum = function(str){ return str?+str.match(/^\d*/):0; } var pad = function(n){ return (n<10?"0":"") + n; } var now = +new Date(); var div = document.getElementsByTagName("div"); var i = 0, d, data, def; while(d=div[i++]){ if(d.className.match(/(^| )timeStamp( |$)/)){ data = d.innerHTML.replace(/[ ]/g, "").match(/(^[-+])?(\d*時間)?(\d*分)?(\d*秒?)?$/); if(data!==null){ def = (toNum(data[2]) * 60 + toNum(data[3])) * 60 + toNum(data[4]); def *= (data[1]==="-"?-1000:1000); dt = new Date(now + def); data = pad(dt.getMonth() + 1) + "月"; data +=pad(dt.getDate()) + "日"; data += pad(dt.getHours()) + "時間"; data += pad(dt.getMinutes()) + "分"; data += pad(dt.getSeconds()) + "秒"; d.innerHTML = data; } } } })(); </script> </body> </html> ＞ホームページを作れと言われた普通のOLです 業務であるのなら、会社の資金と時間でまず学校などに行かせてもらい、それなりの学習がすんでから作成するのが順序ではないでしょうか。 あるいは、どなたかわかっている上司なりが、手順や方法を指導してくれるとか。 それもダメなら、外部の制作できるところへ外注するというのが普通の発想だと思いますけれど…
- Gotthold
- ベストアンサー率47% (396/832)
setMinutesなどを使えば-6になろうがちゃんと適切に処理してくれます。 <div id="now"></div> <div id="before3min"></div> <div id="before4min"></div> <div id="before15min"></div> <script type="text/javascript"> function DateToString (d) { var weeks = ['日', '月', '火', '水', '木', '金', '土']; // 年月日・曜日・時分秒の取得 var month = d.getMonth() + 1; var day = d.getDate(); var week = weeks[ d.getDay() ]; var hour = d.getHours(); var minute = d.getMinutes() ; var second = d.getSeconds() ; // 1桁を2桁に変換する if (month < 10) {month = "0" + month;} if (day < 10) {day = "0" + day;} if (hour < 10) {hour = "0" + hour;} if (minute < 10) {minute = "0" + minute;} if (second < 10) {second = "0" + second;} // 整形して返却 return d.getFullYear() + "/" + month + "/" + day + "（" + week + "） " + hour + ":" + minute + ":" + second; } setInterval( function () { //現在時刻のDateオブジェクトを必要数つくる var d_now = new Date(); var d_before3min = new Date(d_now); var d_before4min = new Date(d_now); var d_before15min = new Date(d_now); //過去の時刻をセット d_before3min .setMinutes(d_now.getMinutes()-3); d_before4min .setMinutes(d_now.getMinutes()-4); d_before15min.setMinutes(d_now.getMinutes()-15); //文字列に変換して反映 document.getElementById("now").innerHTML = DateToString(d_now); document.getElementById("before3min").innerHTML = DateToString(d_before3min); document.getElementById("before4min").innerHTML = DateToString(d_before4min); document.getElementById("before15min").innerHTML = DateToString(d_before15min); } , 1000); </script>
お礼
本当にありがとうございますm(__)m とても助かりました(*^_^*) setMinutesを使うのですね！勉強になりました。 －??分の部分は表示できて感動しました!!笑 できれば、スクリプトを実行した時点の時刻で表示（－??分も） リアルタイムに表示させなくしたいのですが、できますか...? 1・2・3・4・5・6・7・・・・・秒ではなく「1」秒(スクリプト実行時の現在時刻)と表示させたいです。 何度もほんとうにすみません(>_<)