JAVASCRIPT时间戳转换工具

傷城~ 2022-07-12 04:16 265阅读 0赞

![20170210110722900][]

<!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">
    
    </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>

[20170210110722900]: /images/20220711/c7338e2180cf4149855156f879b1881d.png