JAVASCRIPT时间戳转换工具

最新推荐文章于 2022-09-23 17:16:46 发布
相思比梦长
最新推荐文章于 2022-09-23 17:16:46 发布
阅读量752
点赞数 1
分类专栏： WEB前端文章标签： JAVASCRIPT 时间戳转换工具
本文链接：https://blog.csdn.net/netuser1937/article/details/54965182
版权
WEB前端专栏收录该内容
114 篇文章 2 订阅
订阅专栏
<!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" />
<title>时间戳转换工具</title>
<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>