Web js时间戳转换
一、简述
记--时间转时间戳,时间戳转时间,年积日计算。
二、效果
三、例子代码
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>时间戳转换</title>
<script type="text/javascript">
/*获取当前时间并刷新*/
function RefreshDateTime() {
var now = new Date();
var element_current_timestamp = document.getElementById("current_timestamp");
if (undefined != element_current_timestamp && null != element_current_timestamp) {
element_current_timestamp.innerHTML = now.getTime()/1000;
}
var element_current_localtime = document.getElementById("current_localtime");
if (undefined != element_current_localtime && null != element_current_localtime) {
element_current_localtime.innerHTML = FormatDate(now) + " (" + now.toLocaleString() + ")";
}
var element_current_utctime = document.getElementById("current_utctime");
if (undefined != element_current_utctime && null != element_current_utctime) {
element_current_utctime.innerHTML = now.toUTCString();
}
}
/*格式化时间*/
function FormatDate(date) {
if (undefined == date || null == date || "" == date) {
return "";
}
var mon = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth(); //月
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //日期
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //时
var min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //分
var sec = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒
var datetime = date.getFullYear() + "-" + mon + "-" + day + " " + hour + ":" + min + ":" + sec;
return datetime;
}
/*将时间戳转换为时间*/
function ConvertTimestamp () {
var timestamp_obj = document.getElementById("convert_timestamp");
if (undefined == timestamp_obj || null == timestamp_obj) {
console.log("not found element:convert_timestamp.");
return;
}
if ("" == timestamp_obj.value || null == timestamp_obj.value) {
console.log("convert_timestamp is empty.");
return;
}
var convert_timestamp_label_obj = document.getElementById("convert_timestamp_label");
if (undefined != convert_timestamp_label_obj && null != convert_timestamp_label_obj) {
convert_timestamp_label_obj.innerHTML = timestamp_obj.value;
}
var date = new Date(parseInt(timestamp_obj.value)*1000);
var element_convert_localtime = document.getElementById("convert_localtime");
if (undefined != element_convert_localtime && null != element_convert_localtime) {
element_convert_localtime.innerHTML = FormatDate(date) + " (" + date.toLocaleString() + ")";
}
var element_convert_utctime = document.getElementById("convert_utctime");
if (undefined != element_convert_utctime && null != element_convert_utctime) {
element_convert_utctime.innerHTML = date.toUTCString();
}
}
/*初始化日历控件为当前时间*/
function InitCalendar() {
var now = new Date();
var mon = now.getMonth() + 1 < 10 ? "0" + (now.getMonth() + 1) : now.getMonth(); //月
var day = now.getDate() < 10 ? "0" + now.getDate() : now.getDate(); //日期
var hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours(); //时
var min = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes(); //分
var date = now.getFullYear() + "-" + mon + "-" + day;
if (undefined != document.getElementById("calendar_datetime")) {
var datetime = date + "T" + hour + ":" + min;
document.getElementById("calendar_datetime").value = datetime;
}
if (undefined != document.getElementById("calendar_date")) {
document.getElementById("calendar_date").value = date;
}
}
/*日期时间转时间戳*/
function CalendarDateTimeToTimestamp() {
if (undefined != document.getElementById("calendar_datetime") && undefined != document.getElementById("calendar_timestamp")) {
var datetime = document.getElementById("calendar_datetime").value;
if (undefined != datetime && null != datetime && "" != datetime) {
var arr = datetime.split(/[-T:]/);
if (5 >= arr.length) {
var date = new Date();
date.setFullYear(arr[0]);
date.setMonth(arr[1]-1);
date.setDate(arr[2]);
date.setHours(arr[3]);
date.setMinutes(arr[4]);
date.setSeconds(0);
document.getElementById("calendar_timestamp").innerHTML = parseInt(date.getTime()/1000);
}
}
}
}
/*计算年积日*/
function CalculateDayOfYear(date) {
if (undefined == date || null == date || "" == date) {
console.log("date is " + date);
return 0;
}
var year = date.getFullYear();
var mon = date.getMonth();
var day_of_year = 0;
var mon_days = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if( ( year%4 == 0 && year%100 !=0 ) || year%400==0) {
mon_days[1]= 29;
}
for(var i = 0; i < mon; i++) {
day_of_year += mon_days[i];
}
day_of_year += date.getDate();
return day_of_year;
}
/*日历时间转年积日*/
function CalendarDateToDayOfYear () {
if (undefined != document.getElementById("calendar_date") && undefined != document.getElementById("calendar_dayofyear")) {
var date = document.getElementById("calendar_date").value;
if (undefined != date && null != date && "" != date) {
var arr = date.split(/[-]/);
if (3 >= arr.length) {
var date = new Date();
date.setFullYear(arr[0]);
date.setMonth(arr[1]-1);
date.setDate(arr[2]);
document.getElementById("calendar_dayofyear").innerHTML = CalculateDayOfYear(date);
}
}
}
}
/*定时1秒执行RefreshDateTime函数*/
//setInterval("RefreshDateTime();", 1000);
/*仅执行一次*/
//setTimeout("RefreshDateTime();", 1000);
/*页面加载完成执行*/
window.onload = function () {
RefreshDateTime();
var timestamp_obj = document.getElementById("convert_timestamp");
if (undefined != timestamp_obj || null != timestamp_obj) {
var now = new Date();
timestamp_obj.value = parseInt(now.getTime()/1000);
ConvertTimestamp();
}
InitCalendar();
CalendarDateTimeToTimestamp();
CalendarDateToDayOfYear();
}
</script>
</head>
<body>
当前时间戳:<span id="current_timestamp"></span> <input type="button" name="button_RefreshDateTime" onclick="RefreshDateTime();" value="刷新"></br>
本地时间: <span id="current_localtime"></span></br>
UTC时间: <span id="current_utctime"></span></br>
<hr>
时间戳(单位s):<input type="text" id="convert_timestamp"> <input type="button" name="button_convert_timestamp" value="转换" onclick="ConvertTimestamp();"></br>
转换结果:(<span id="convert_timestamp_label"></span>)</br>
本地时间: <span id="convert_localtime"></span></br>
UTC时间: <span id="convert_utctime"></span></br>
<hr>
<input type="datetime-local" id="calendar_datetime" onchange="CalendarDateTimeToTimestamp();"/> 时间戳(单位s):<span id="calendar_timestamp"></span>
<hr>
<input type="date" id="calendar_date" onchange="CalendarDateToDayOfYear();"/> 年积日:<span id="calendar_dayofyear"></span>
</body>
</html>