index.html
<!DOCTYPE html>
<html>
<body>
<input type="text" id="today"><br>
<input type="text" id="youbi"><br>
<input type="text" id="time" value="00 : 00 : 00 : 00"><br>
<input type="text" id="restTime" value="00 : 00 : 00 : 00"><br>
<input type="text" id="ms" value="0">
<script>
var startTime;
var intervalTime;
var pastTime = 0;
var restTime;
function elem(id) {
return document.getElementById(id);
}
/************************************
イベント
************************************/
elem('today').value = getToday();
elem('youbi').value = getYoubi();
stopWatch();
/************************************
stopWatch
************************************/
function stopWatch() {
var today = elem('today').value;
startTime = new Date(today);
intervalTime = setInterval(culcTimeToday, 10);
intervalTimeRest = setInterval(culcTimeTomorrow, 10);
}
/************************************
今日の現在時間を計算
************************************/
function culcTimeToday() {
var stopTime = new Date();
var milsec = stopTime - startTime + pastTime;//差分のミリ秒
elem("ms").value = milsec;
culcTime(milsec, 'today');
}
/************************************
明日までの残り時間をミリ秒で取得して今からの残り時間を取得する
************************************/
function culcTimeTomorrow() {
var milsec = getTilTomorrow();//差分のミリ秒
culcTime(milsec, 'tomorrow');
}
/************************************
経過時間を計算する
************************************/
function culcTime(milsec, timeIs) {
var hour = Math.floor(milsec / 1000 / 60 / 60);//差分のミリ秒を/秒にして/分にして/時にして小数点以下切り捨てる
var milsecM = milsec - (hour * 60 * 60 * 1000);//差分のミリ秒からhour分のミリ秒を引いた残りのミリ秒
var min = Math.floor(milsecM / 1000 / 60);//それを/秒にして/分にして小数点以下を切り捨てる
var milsecS = milsecM - (min * 60 * 1000);//差分のミリ秒からhour分のミリ秒を引いた残りのミリ秒からmin分のミリ秒を引いた残りのミリ秒
var sec = Math.floor(milsecS / 1000);//それを/秒にして小数点以下を切り捨てる
var milsecMS = milsecS % 1000;//差分のミリ秒からhour分のミリ秒を引いた残りのミリ秒からmin分のミリ秒を引いた残りのミリ秒を秒にした余りのミリ秒
var milsec = milsecMS.toString().slice(0, 2);//それを2桁にする
var timeWith0 = add0([hour, min, sec, milsec]);
var time = timeWith0.join(' : ');
culcTimeSet(time, timeIs);
}
/************************************
時間を入力する
************************************/
function culcTimeSet(time, timeIs) {
switch(timeIs) {
case 'today':
elem('time').value = time;
break;
case 'tomorrow':
elem('restTime').value = time;
break;
}
}
/************************************
add0([hour, min, sec, milsec])の形で配列で来てそれぞれ一桁なら頭に0をつける
************************************/
function add0(times) {
for(var i = 0; i < times.length; i++) {
if(times[i] < 10) {
times[i] = "0" + times[i];
}
}
return times;
}
/************************************
今日の日付を取得して返す
************************************/
function getToday() {
var today = new Date();//現在日時
var obj = getDateObj(today);
var date = add0([obj['year'], obj['month'], obj['date']]).join('/');
return date;
}
/************************************
明日の日付を取得して返す
************************************/
function getTomorrow() {
var today = new Date();//現在日時
var tomorrowMs = today.getTime() + 86400000;
var tomorrow = new Date(tomorrowMs);
var obj = getDateObj(tomorrow);
var date = add0([obj['year'], obj['month'], obj['date']]).join('/');
return date;
}
function getTilTomorrow() {
var tomorrow = getTomorrow();
var diff = new Date(tomorrow) - new Date();
return diff;
}
/************************************
渡された日時の年月日と曜日の番号をオブジェクトで返す
************************************/
function getDateObj(target) {
var year = target.getFullYear();
var month = target.getMonth() + 1;
var date = target.getDate();
var dayNum = target.getDay();
var obj = {};
obj['year'] = year;
obj['month'] = month;
obj['date'] = date;
obj['dayNum'] = dayNum;
return obj;
}
/************************************
曜日を取得して返す
************************************/
function getYoubi() {
var SEVEN_DAYS = "日月火水木金土";
var today = new Date();//現在日時
var dateObj = getDateObj(today);
var youbi = SEVEN_DAYS[dateObj['dayNum']];
return youbi;
}
</script>
</body>
</html>
|