日期时间与时间戳转换工具

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="imagetoolbar" content="false" />
<title>时间戳转换工具</title>
<meta name="Keywords" content="时间戳,转换,工具" />
<meta name="Description" content="一个简单的时间戳转换工具" />
<meta name="Robots" content="All" />
<meta name="Author" content="WeakSun QQ:52132522" />
<meta name="Copyright" content="0712xg.com" />
<meta name="Generator" content="Adobe Dreamweaver CS4" />
<style type="text/css">
<!--
html { font:12px/1.67 Arial; color:#222; }
body { background-color:#EEE; margin:0; padding:0; }
table, table th, table td { padding:0; border:solid 1px #000; border-collapse:collapse; border-spacing:0; }
table { border-style:solid none none solid; }
table th, table td { border-style:none solid solid none; }
-->
</style>
</head>
<body>
<table style="width:421px;margin:5% auto;">
	<thead>
		<tr>
			<th colspan="2" height="32">时间戳转换工具</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td height="32" colspan="2" align="center" id="option"></td>
		</tr>
		<tr>
			<td width="96" height="32" align="right">请输入时间戳:</td>
			<td width="230" align="center"><input type="text" id="timestamp"  style="width:275px;" maxlength="10"/></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td height="32" colspan="2" align="center">JavaScript 日期与时间戳相互转换</td>
		</tr>
	</tfoot>
</table>
<script type="text/javascript">
String.prototype.leftPad = function(len, pad) {//获取字符串长度,计算双字节字符
	len = len || 2;
	pad = pad || '0';
	var str = this;
	if (this.length < len) {
		str = pad + this;
		str = str.leftPad(len, pad);
	}
	return str;
}

myDate = function() {//日期类
	this.Weeks = new Array('日', '一', '二', '三', '四', '五', '六');
	this.dateObject = new Date();
	this.yearElement = this.createYear();
	this.monthElement = this.createMonth();
	this.dayElement = this.createDay();
	this.hourElement = this.createHour();
	this.minuteElement = this.createMinute();
	this.secondElement = this.createSecond();
	this.weekElement = this.createWeek();
	this.timestamp = Math.floor(this.dateObject.valueOf() / 1000);
	this.Settings();
	return this;
}

myDate.prototype.getWeek = function() {//获取星期,转换为中文
	var Week = this.dateObject.getDay();
	return '星期' + this.Weeks[Week];
}

myDate.prototype.createYear = function() {//创建年份选项元素
	if (typeof this.yearElement != 'object') {
		this.yearElement = document.createElement('select');
		this.yearElement.self = this;
		var Year = this.dateObject.getFullYear();
		for (var i = (Year + 10); i > 1969; i--) {
			var Element = document.createElement('option');
			Element.value = i;
			Element.innerHTML = i;
			this.yearElement.appendChild(Element);
		}
		this.yearElement.onchange = function() {
			var newValue = parseInt(this.value);
			this.self.dateObject.setFullYear(newValue);
			this.self.Settings();
		}
	}
	return this.yearElement;
}

myDate.prototype.createMonth = function() {//创建月份选项元素
	if (typeof this.monthElement != 'object') {
		this.monthElement = document.createElement('select');
		this.monthElement.self = this;
		for (var i = 0; i < 12; i++) {
			var Element = document.createElement('option');
			Element.value = i;
			Element.innerHTML = String(i + 1).leftPad();
			this.monthElement.appendChild(Element);
		}
		this.monthElement.onchange = function() {
			var newValue = parseInt(this.value);
			this.self.dateObject.setMonth(newValue);
			this.self.createDay();
			this.self.Settings();
		}
	}
	return this.monthElement;
}

myDate.prototype.createDay = function() {//创建日期选项元素
	var dayNum = new Date(this.dateObject.getFullYear(), this.dateObject.getMonth() + 1, 0).getDate();
	if (typeof this.dayElement != 'object') {
		this.dayElement = document.createElement('select');
		this.dayElement.self = this;
		this.dayElement.onchange = function() {
			var newValue = parseInt(this.value);
			this.self.dateObject.setDate(newValue);
			this.self.Settings();
		}
	} else {
		if (this.dateObject.getDate() > dayNum) {
			this.dateObject.setDate(dayNum);
		}
		this.dayElement.length = 0;
	}
	for (var i = 0; i < dayNum; i++) {
		var Element = document.createElement('option');
		Element.value = (i + 1);
		Element.innerHTML = String(i + 1).leftPad();
		this.dayElement.appendChild(Element);
	}
	return this.dayElement;
}

myDate.prototype.createHour = function() {//创建小时选项元素
	if (typeof this.hourElement != 'object') {
		this.hourElement = document.createElement('select');
		this.hourElement.self = this;
		for (var i = 0; i < 24; i++) {
			var Element = document.createElement('option');
			Element.value = i;
			Element.innerHTML = String(i).leftPad();
			this.hourElement.appendChild(Element);
		}
		this.hourElement.onchange = function() {
			var newValue = parseInt(this.value);
			this.self.dateObject.setHours(newValue);
			this.self.Settings();
		}
	}
	return this.hourElement;
}

myDate.prototype.createMinute = function() {//创建分钟选项元素
	if (typeof this.minuteElement != 'object') {
		this.minuteElement = document.createElement('select');
		this.minuteElement.self = this;
		for (var i = 0; i < 60; i++) {
			var Element = document.createElement('option');
			Element.value = i;
			Element.innerHTML = String(i).leftPad();
			this.minuteElement.appendChild(Element);
		}
		this.minuteElement.onchange = function() {
			var newValue = parseInt(this.value);
			this.self.dateObject.setMinutes(newValue);
			this.self.Settings();
		}
	}
	return this.minuteElement;
}

myDate.prototype.createSecond = function() {//创建秒选项元素
	if (typeof this.secondElement != 'object') {
		this.secondElement = document.createElement('select');
		this.secondElement.self = this;
		for (var i = 0; i < 60; i++) {
			var Element = document.createElement('option');
			Element.value = i;
			Element.innerHTML = String(i).leftPad();
			this.secondElement.appendChild(Element);
		}
		this.secondElement.onchange = function() {
			var newValue = parseInt(this.value);
			this.self.dateObject.setSeconds(newValue);
			this.self.Settings();
		}
	}
	return this.secondElement;
}

myDate.prototype.createWeek = function() {//创建星期元素
	if (typeof this.weekElement != 'object') {
		this.weekElement = document.createTextNode(this.getWeek());
	} else {
		this.weekElement.data = this.getWeek();
	}
	return this.weekElement;
}

myDate.prototype.Settings = function() {//刷新应用设置
	this.timestamp = Math.floor(this.dateObject.valueOf() / 1000);
	this.yearElement.value = this.dateObject.getFullYear();
	this.monthElement.value = this.dateObject.getMonth();
	this.dayElement.value = this.dateObject.getDate();
	this.hourElement.value = this.dateObject.getHours();
	this.minuteElement.value = this.dateObject.getMinutes();
	this.secondElement.value = this.dateObject.getSeconds();
	this.weekElement.data = this.getWeek();
	if (typeof this.change == 'function') {
		this.change();
	}
	return this;
}

myDate.prototype.writeOption = function(recep) {//将元素插入指定对象
	if (typeof recep == 'object') {
		var label = document.createElement('label');
		label.appendChild(this.yearElement);
		label.appendChild(document.createTextNode('年'));
		recep.appendChild(label);

		label = document.createElement('label');
		label.appendChild(this.monthElement);
		label.appendChild(document.createTextNode('月'));
		recep.appendChild(label);

		label = document.createElement('label');
		label.appendChild(this.dayElement);
		label.appendChild(document.createTextNode('日'));
		recep.appendChild(label);

		label = document.createElement('label');
		label.appendChild(this.hourElement);
		label.appendChild(document.createTextNode('时'));
		recep.appendChild(label);

		label = document.createElement('label');
		label.appendChild(this.minuteElement);
		label.appendChild(document.createTextNode('分'));
		recep.appendChild(label);

		label = document.createElement('label');
		label.appendChild(this.secondElement);
		label.appendChild(document.createTextNode('秒 '));
		recep.appendChild(label);

		recep.appendChild(document.createElement('label').appendChild(obj.weekElement));

		this.Settings();
	}
	return recep;
}

myDate.prototype.setTimestamp = function(timestamp) {//应用时间戳设置
	if (typeof timestamp == 'undefined') {
		timestamp = Math.floor(new Date().valueOf() / 1000);
	} else {
		timestamp = parseInt(timestamp) | 0;
	}
	this.dateObject = new Date(timestamp * 1000);
	this.Settings();
}

myDate.prototype.change = function() {}//选项变更事件处理函数

var obj = new myDate();
obj.change = function() {
	document.getElementById('timestamp').value = this.timestamp;
}

document.getElementById('timestamp').onkeyup = function() {
	obj.setTimestamp(this.value);
}

document.getElementById('timestamp').onblur = function() {
	this.value = obj.timestamp;
}

obj.writeOption(document.getElementById('option'));
</script>
</body>
</html>


你可能感兴趣的:(JavaScript,时间戳)