日数差
○○まであと何日？
<![CDATA[
var currentDate = new Date(); // 現在
var targetDate = new Date("2050/1/1"); // 2050年1月1日
days = Math.ceil( (targetDate.getTime() - currentDate.getTime()) / (24*60*60*1000) );
document.write("2050年1月1日まであと", days, "日です。");
</script>
]]>
○日後は何月何日？
<![CDATA[
var today = new Date(); // 本日
var n=365;
var date = new Date( today.getTime() + n*24*60*60*1000 ); // n日後
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
document.write(n,"日後は",year,"年",month,"月",day,"日");
]]>
過去／未来の日付を計算
(手順)
(1)dateオブジェクトの作成
(2)指定した日数を加算または減算
(3)修正されたdateオブジェクトから日付を表す文字列や数値を取得
<![CDATA[
・現在の日付から１０日後の日付を計算
var myDate = new Date();
myDate.setDate(myDate.getDate() + 10);
alert(myDate.toLocaleDateString());
・現在の日付から１０日前の日付を計算
var myDate = new Date();
myDate.setDate(myDate.getDate() - 10);
alert(myDate.toLocaleDateString());
]]>
更新日より一定期間表示
最終更新日より一定期間だけ表示するようにします。
最新のコンテンツに「New」の文字を付けた後、時間が経てば自動的に表示をはずすことができます 。
<![CDATA[
upDay = new Date(document.lastModified);
expTerm = 1*(24*60*60*1000); // 一日だけ表示
theDay = new Date();
gap = (theDay - upDay);
gap = (theDay - upDay);
if(gap<=expTerm) {
document.write("<font color='#FF0000'><CENTER>最新情報！</CENTER></font><BR>");
}
]]>
時計
setTimeout()関数を使って、現在時間取得処理を１秒毎に行います。
<![CDATA[
<script language="javascript">
<!--
function realClock(){
nowTime = new Date;
nowHour = nowTime.getHours();
nowMinutes = nowTime.getMinutes();
nowSeconds = nowTime.getSeconds();
if (nowHour < 10){
nowHour = "0" + nowHour;
}
if (nowMinutes < 10){
nowMinutes = "0" + nowMinutes;
}
if (nowSeconds < 10){
nowSeconds = "0" + nowSeconds;
}
document.myClock.clock_text.value = nowHour+"時"+nowMinutes+"分"+nowSeconds+"秒";
setTimeout('realClock()',1000);
}
//-->
</script>
</HEAD>
<BODY onLoad="realClock()">
<FORM name="myClock">
現在の時刻◆<INPUT type="text" name="clock_text" size="15">
</FORM>
]]>
ストップウォッチ
(1)スタートボタンをクリックした時
タイマーを使って100ms毎に経過時間を表示。
(2)ストップボタンをクリックした時
それまでの経過時間をoffset時間に保存。
経過時間 ＝ 現在時間 − start時間 ＋ offset時間
<![CDATA[
var timer = null;
var startTime = null;
var currentTime = null;
var offsetTime = 0;
]]>
スタートボタン
<![CDATA[
function startTimer(){
if( !timer ){ // タイマー動作中でなかった場合
// スタート時間
startTime = new Date();
// 100msec間隔でshowTime()
timer = setInterval('showTime()',100);
}
}
function showTime(){
// 現在時刻
currentTime = new Date();
// 経過時間（msec）
var time = currentTime.getTime() - startTime.getTime() + offsetTime;
// テキストフィールドに表示
document.getElementById("watch").value = time / 1000;
return time;
}
function stopTimer(){
if( timer ){ // タイマー動作中の場合
// タイマーストップ
clearInterval(timer);
timer = null;
// 経過時間をoffsetTimeに保存
offsetTime = showTime();
}
}
]]>
ストップボタン
<![CDATA[
function stopTimer(){
if( timer ){ // タイマー動作中の場合
// タイマーストップ
clearInterval(timer);
timer = null;
// 経過時間をoffsetTimeに保存
offsetTime = showTime();
}
}
]]>
<![CDATA[
function resetTimer(){
// タイマーストップ
clearInterval(timer);
timer = null;
// offsetTimeをリセット
offsetTime = 0;
document.getElementById("watch").value = "0.00";
}
]]>
<![CDATA[
<form action="#">
<input type="text" id="watch" />秒<br />
<input type="button" value="スタート" onclick="startTimer()" />
<input type="button" value="ストップ" onclick="stopTimer()" />
<input type="button" value="リセット" onclick="resetTimer()" />
</form>
]]>
