<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Title</title>
</head>
<body>
<div>------------------------------------</div>
<div id="show-date"></div>
<div>------------------------------------</div>
<div id="show-date2"></div>
<div>------------------------------------</div>
<div id="show-date3"></div>
<script>
/*判断闰年*/
const isLeapYear = year => {
let cond1 = year % 4 === 0;
let cond2 = year % 100 !== 0;
let cond3 = year % 400 === 0;
let cond = cond1 && cond2 || cond3;
if (cond) {
return "leap";
} else {
return "not leap";
}
};
const dayNumArr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const dayNumLeapArr = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let daysChangeToMonthObj = null;
/*天进位转化为月*/
const daysChangeToMonth = dateObj => {
let obj = dateObj;
let days = null;
if (isLeapYear(obj.year) === "leap") {
days = dayNumLeapArr[obj.month - 1];
} else {
days = dayNumArr[obj.month - 1];
}
if (obj.day > days) {
obj.day -= days;
obj.month++;
if (obj.month > 12) {
obj.year += Math.floor(obj.month / 12);
obj.month = obj.month % 12;
}
daysChangeToMonth(obj);
} else {
daysChangeToMonthObj = obj;
}
};
/*日期序列化*/
const getDateSerialize = dateObj => {
let obj = {};
if (dateObj.second >= 60) {
obj.minute += Math.floor(dateObj.second / 60);
obj.second = dateObj.second % 60;
} else {
obj.second = dateObj.second;
obj.minute = dateObj.minute;
}
if (dateObj.minute >= 60) {
obj.hour += Math.floor(dateObj.minute / 60);
obj.minute = dateObj.minute % 60;
} else {
obj.hour = dateObj.hour;
obj.minute = dateObj.minute;
}
if (dateObj.hour >= 24) {
obj.day += Math.floor(dateObj.hour / 24);
obj.hour = dateObj.hour % 24;
} else {
obj.day = dateObj.day;
obj.hour = dateObj.hour;
}
obj.year = dateObj.year;
obj.month = dateObj.month;
obj.day = dateObj.day;
if (dateObj.month > 12) {
obj.year += Math.floor(dateObj.month / 12);
obj.month = dateObj.month % 12;
} else {
obj.year = dateObj.year;
obj.month = dateObj.month;
}
daysChangeToMonth(obj);
obj.year = daysChangeToMonthObj.year;
obj.month = daysChangeToMonthObj.month;
obj.day = daysChangeToMonthObj.day;
return obj;
};
/*获取时间*/
/*
* addDateObj：增加的日期数
*/
const getDate = addDateObj => {
let obj = {};
let d = new Date();
if (addDateObj) {
addDateObj.year === undefined ? obj.year = d.getFullYear() : obj.year = d.getFullYear() + addDateObj.year;
addDateObj.month === undefined ? obj.month = d.getMonth() + 1 : obj.month = d.getMonth() + 1 + addDateObj.month;
addDateObj.day === undefined ? obj.day = d.getDate() : obj.day = d.getDate() + addDateObj.day;
addDateObj.hour === undefined ? obj.hour = d.getHours() : obj.hour = d.getHours() + addDateObj.hour;
addDateObj.minute === undefined ? obj.minute = d.getMinutes() : obj.minute = d.getMinutes() + addDateObj.minute;
addDateObj.second === undefined ? obj.second = d.getSeconds() : obj.second = d.getSeconds() + addDateObj.second;
obj = getDateSerialize(obj);
} else {
obj.year = d.getFullYear();
obj.month = d.getMonth() + 1;
obj.day = d.getDate();
obj.hour = d.getHours();
obj.minute = d.getMinutes();
obj.second = d.getSeconds();
}
obj.year = "" + obj.year;
obj.month = ("0" + obj.month).slice(-2);
obj.day = ("0" + obj.day).slice(-2);
obj.hour = ("0" + obj.hour).slice(-2);
obj.minute = ("0" + obj.minute).slice(-2);
obj.second = ("0" + obj.second).slice(-2);
obj.now = obj.year + "-" + obj.month + "-" + obj.day;
obj.nowTime = obj.now + " " + obj.hour + ":" + obj.minute + ":" + obj.second;
return obj;
};
window.onload = () => {
let futureObj = {
year: 1,
month: 1,
day: 1,
hour: 1,
minute: 1,
second: 1,
};
let futureObj2 = {
hour: 10,
minute: 10,
};
let futureObj3 = {
day: 100,
};
let showDate = document.getElementById("show-date");
let showDate2 = document.getElementById("show-date2");
let showDate3 = document.getElementById("show-date3");
let runTime = (showElement, dateObj) => {
let nowTime = getDate().nowTime;
let futureTime = getDate(dateObj).nowTime;
showElement.innerHTML = "--now time: " + nowTime + "<br/>future time: " + futureTime;
};
setInterval(() => {
runTime(showDate, futureObj);
runTime(showDate2, futureObj2);
runTime(showDate3, futureObj3);
}, 500);
}
</script>
</body>
</html>
