Javascript 時間のフォーマット用クラス？
2007年12月26日(水)
先ほどActionScriptのクラス、オブジェクトについて少し話す機会があったので
オブジェクト？Classについて少々考えました
理解は何となく出来ているつもりでも、誰かに伝えるのは
なかなか・・・
で、最近Javascriptにはまっているので何かサンプルでもと思い
ちょろっと書いてみました
ActionScriptは私のPCにフラッシュがないので、、
それに、優秀なFlash使いがいるので恐れ多くて・・
コメントも最初は入れようと思ったのですが・・・
見づらくて申し訳ないです
内容としては日付は比較的扱う機会が多いけど、
Dateオブジェクトを毎回作成してある程度フォーマットしなくてはいけない
というのが面倒だから関数を用意しとこうという感じです
他に思いつかなかったので・・・
で、今回のポイントは
javascriptで時間や、秒を取得すると
10以下の値だったばあいは一桁の数字返ってきてしまう
が、実際は
09:00とか、にしたいわけで9時1分だったら 9:1とかだとかっこ悪くなってしまう訳で9を09に、1を01に直してあげる作業が必要になるわけです
そこで、それらを修正し好きなフォーマットで返す事が出来る関数を作ってみました
・・・・。
説明が良くわからなくなってきましたので、
下記のソースと実行結果を見て頂ければと思います
object.format1("HH-MM-SS"));
で、
HHが時間、MMが分、SSが秒です
HHと二桁で渡すと09とフォーマットされて返ってきます
Hと一桁で渡すと9と一桁のまま返ってきます
で、好きなフォーマットで渡してあげる
bject.format1("HH時MM分SS秒"));
等など。。
PHPのdate()関数がイメージ近いですね
使えますかね？
↓ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<script type="text/javascript">
<!--
function MyDateClass(){
// オブジェクトを作成
this.DateObj = new Date();
// 文字列のフォーマット
this.format2 = function(num){
if(num < 10){
return "0"+num;
}
return num;
};
// 時間
this.hour = this.DateObj.getHours();
// 時間二桁
this.hourHH = this.format2(this.hour);
// 分
this.min = this.DateObj.getMinutes();
// 分二桁
this.minMM = this.format2(this.min);
// 秒
this.sec = this.DateObj.getSeconds();
// 秒二桁
this.secSS = this.format2(this.sec);
this.format1 = function(str){
var reg = str.match(/H/g);
var h_tmp = this.hour;
if(reg.length != 1){
h_tmp = this.hourHH;
}
str = str.replace(/H+/,h_tmp);
reg = str.match(/M/g);
var m_tmp = this.min;
if(reg.length != 1){
m_tmp = this.minMM;
}
str = str.replace(/M+/,m_tmp);
reg = str.match(/S/g);
var s_tmp = this.sec;
if(reg.length != 1){
s_tmp = this.secSS;
}
str = str.replace(/S+/,s_tmp);
return str;
};
}
var object = new MyDateClass();
// -->
</script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
document.write("object.hour → "+object.hour+"<br />");
document.write("object.hourHH → "+object.hourHH+"<br />");
document.write("object.min → "+object.min+"<br />");
document.write("object.minMM → "+object.minMM+"<br />");
document.write("object.sec → "+object.sec+"<br />");
document.write("object.secSS → "+object.secSS+"<br />");
// -->
</script>
<br />
<script type="text/javascript">
<!--
document.write("H-M-S → "+object.format1("H-M-S"));
// -->
</script>
<br />
<script type="text/javascript">
<!--
document.write("HH-MM-SS → "+object.format1("HH-MM-SS"));
// -->
</script>
</BODY>
</HTML>
↓実行結果
object.hour → 21
object.hourHH → 21
object.min → 48
object.minMM → 48
object.sec → 0
object.secSS → 00
H-M-S → 21-48-0
HH-MM-SS → 21-48-00
オブジェクト？Classについて少々考えました
理解は何となく出来ているつもりでも、誰かに伝えるのは
なかなか・・・
で、最近Javascriptにはまっているので何かサンプルでもと思い
ちょろっと書いてみました
ActionScriptは私のPCにフラッシュがないので、、
それに、優秀なFlash使いがいるので恐れ多くて・・
コメントも最初は入れようと思ったのですが・・・
見づらくて申し訳ないです
内容としては日付は比較的扱う機会が多いけど、
Dateオブジェクトを毎回作成してある程度フォーマットしなくてはいけない
というのが面倒だから関数を用意しとこうという感じです
他に思いつかなかったので・・・
で、今回のポイントは
javascriptで時間や、秒を取得すると
10以下の値だったばあいは一桁の数字返ってきてしまう
が、実際は
09:00とか、にしたいわけで9時1分だったら 9:1とかだとかっこ悪くなってしまう訳で9を09に、1を01に直してあげる作業が必要になるわけです
そこで、それらを修正し好きなフォーマットで返す事が出来る関数を作ってみました
・・・・。
説明が良くわからなくなってきましたので、
下記のソースと実行結果を見て頂ければと思います
object.format1("HH-MM-SS"));
で、
HHが時間、MMが分、SSが秒です
HHと二桁で渡すと09とフォーマットされて返ってきます
Hと一桁で渡すと9と一桁のまま返ってきます
で、好きなフォーマットで渡してあげる
bject.format1("HH時MM分SS秒"));
等など。。
PHPのdate()関数がイメージ近いですね
使えますかね？
↓ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<script type="text/javascript">
<!--
function MyDateClass(){
// オブジェクトを作成
this.DateObj = new Date();
// 文字列のフォーマット
this.format2 = function(num){
if(num < 10){
return "0"+num;
}
return num;
};
// 時間
this.hour = this.DateObj.getHours();
// 時間二桁
this.hourHH = this.format2(this.hour);
// 分
this.min = this.DateObj.getMinutes();
// 分二桁
this.minMM = this.format2(this.min);
// 秒
this.sec = this.DateObj.getSeconds();
// 秒二桁
this.secSS = this.format2(this.sec);
this.format1 = function(str){
var reg = str.match(/H/g);
var h_tmp = this.hour;
if(reg.length != 1){
h_tmp = this.hourHH;
}
str = str.replace(/H+/,h_tmp);
reg = str.match(/M/g);
var m_tmp = this.min;
if(reg.length != 1){
m_tmp = this.minMM;
}
str = str.replace(/M+/,m_tmp);
reg = str.match(/S/g);
var s_tmp = this.sec;
if(reg.length != 1){
s_tmp = this.secSS;
}
str = str.replace(/S+/,s_tmp);
return str;
};
}
var object = new MyDateClass();
// -->
</script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
document.write("object.hour → "+object.hour+"<br />");
document.write("object.hourHH → "+object.hourHH+"<br />");
document.write("object.min → "+object.min+"<br />");
document.write("object.minMM → "+object.minMM+"<br />");
document.write("object.sec → "+object.sec+"<br />");
document.write("object.secSS → "+object.secSS+"<br />");
// -->
</script>
<br />
<script type="text/javascript">
<!--
document.write("H-M-S → "+object.format1("H-M-S"));
// -->
</script>
<br />
<script type="text/javascript">
<!--
document.write("HH-MM-SS → "+object.format1("HH-MM-SS"));
// -->
</script>
</BODY>
</HTML>
↓実行結果
object.hour → 21
object.hourHH → 21
object.min → 48
object.minMM → 48
object.sec → 0
object.secSS → 00
H-M-S → 21-48-0
HH-MM-SS → 21-48-00
街の見かたは人の数だけある。地図で自分を表現しよう。
）
