2008年07月10日

日付 カウントダウン リアルタイム表示

スポンサード リンク

2015年1月1日 まで

刻一刻とリアルタイムに時間が経過していきます。
ブログ本体にソースを書くと関数や変数が干渉し合うのか
うまく作動しませんので インラインフレームに入れました。

サンプルソース

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language=JavaScript>
<!--
window.onload=showday;
year=2015; //年
mon=1; //月
day=1; //日
time=0; //時
xday = new Date(year,mon-1,day,time,00,00);//基準になる年月日
function showday() {
nowday = new Date();
passtime= xday.getTime()-nowday.getTime(); //今から基準になる日までの経過時間 1/1000秒単位

cnt_day = Math.floor(passtime/(1000*60*60*24));// カウントダウン表示 (日にち) の取得
passtime = passtime -(cnt_day*(1000*60*60*24)); // 経過秒から(日にち)を引く

cnt_hour = Math.floor(passtime/(1000*60*60));// カウントダウン表示 (時) の取得
passtime = passtime -(cnt_hour*(1000*60*60)); // 経過秒から(時)を引く

cnt_min = Math.floor(passtime/(1000*60)); // カウントダウン表示 (分) 取得
passtime = passtime -(cnt_min*(1000*60));// 経過秒から(分)を引く

cnt_sec = Math.floor(passtime/1000);// カウントダウン表示 (秒) 取得
passtime = passtime -(cnt_sec*(1000)); // 経過秒から(秒)を引く

cnt_millisec = Math.floor(passtime/10); // カウントダウン表示 (100/1秒) 取得

// 分、秒、ミリ秒を2桁で表示する。
if(cnt_min<10){cnt_min = '0' + cnt_min;}
if(cnt_sec<10){cnt_sec = '0' + cnt_sec;}
if(cnt_millisec<10){cnt_millisec = '0' + cnt_millisec;}

if((xday - nowday) > 0){
document.tbox.dspday.value = "開催まで "+cnt_day+"日と "+cnt_hour+"時間"+cnt_min+"分"+cnt_sec+"秒"+cnt_millisec+" です!"
}
else {
document.tbox.dspday.value = "カウントダウンは終了。"
}
timerID = setTimeout('showday()', 10);
}

// -->
</SCRIPT>

</HEAD>
<BODY>
<FORM name="tbox" style="background-color : #ffffa6;width : 45px;"><INPUT name="dspday" type="text" style="font-size : 15pt; color : navy; background-color : #ffffa6; text-align : center;border-width : 0px ;border-style : solid;font-weight :bold ;" size="45"></FORM>
</BODY>
</HTML>

指定日まであと何日?指定日から今日まで何日経った?も参考にしてください。


posted by javaScript at 17:56 | 大阪 ☁ | 日付 時刻 時計 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。