h5页面上时间格式化

h5页面会应到到PC、Android、IOS,但是,我们经常用到的new Date().Format(' ') 有可能不兼容所有的系统。最近在做h5时,遇到ios不识别'2017-03-12 12:09',返回的是NaN,网上查了一些方法,做下总结:


封装的一些时间格式方法:

1.时间格式化

Date.prototype.Format = function(fmt) {
var o = {
"M+": this.getMonth() + 1, //月份   
"d+": this.getDate(), //日   
"h+": this.getHours(), //小时   
"m+": this.getMinutes(), //分   
"s+": this.getSeconds(), //秒   
"q+": Math.floor((this.getMonth() + 3) / 3), //季度   
"S": this.getMilliseconds() //毫秒   
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};


2. 格式化秒数到时间格式 00:02:03
Number.prototype.formatTime = function() {
// 计算
var h = 0,
i = 0,
s = parseInt(this);
if (s >= 60) {
i = parseInt(s / 60);
s = parseInt(s % 60);
if (i >= 60) {
h = parseInt(i / 60);
i = parseInt(i % 60);
}
}
// 补零
var zero = function(v) {
return (v >> 0) < 10 ? "0" + v : v;
};
return [zero(h), zero(i), zero(s)].join(":");
};


3.// 倒计时,t:秒数
Date.Countdown = function(t){
var d = 0,
h = 0,
m = 0,
s = t;
var countdown = '';
if (s > 60) {
m = parseInt(s / 60);
s = parseInt(s % 60);
if (m > 60) {
h = parseInt(m / 60);
m = parseInt(m % 60);
if (h > 24) {
d = parseInt(h / 24);
h = parseInt(h % 24);
}
}
}

if (d > 0) {
countdown = d + '天' + h + '小时' + m + '分' + s + '秒';
}else if (h > 0) {
countdown = h + '小时' + m + '分' + s + '秒';
}else if (m > 0) {
countdown = m + '分' + s + '秒';
}else if (s > 0) {
countdown = s + '秒';
}else{
countdown = 0;
}
return countdown;
};


如果需要处理的时间格式是‘2017-03-12 12:11’,在ios上不识别,需要转换成2017/03/12/12/11,这样就可以了:

var testTime = ‘2017-03-12 12:11’;

var arr = testTime.split(/[- : \/]/);

var servertime = new Date(arr[0],arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
alert(servertime);


或者


var time = new Date().Format('yyyy/MM/dd/hh/mm/ss');



<think>好的,用户想在H5页面中通过JavaScript或其他前端技术获取标准的北京时间。首先,我需要回忆一下JavaScript中处理日期时间的方法。通常,JavaScript的Date对象可以获取用户本地的时间,但用户需要的是北京时间,也就是UTC+8时区的时间。不过,直接使用本地时间可能不准确,因为用户的设备时区可能不是北京时区。 接下来,我应该考虑如何将本地时间转换为UTC+8时间。可以通过获取UTC时间,然后加上8小时来实现。例如,使用getUTCHours()方法获取UTC小时数,然后加8,再对24取模处理可能的溢出。分钟和秒数则可以直接使用UTC的数值,因为时区不影响这些部分。不过,这样处理可能不够精确,尤其是当用户设备时间不准确时。 然后,用户可能需要更可靠的方法,比如从服务器获取时间。因为前端JavaScript的时间依赖于客户端系统时间,如果客户端时间不正确,显示的时间也会有误差。所以,建议用户通过AJAX请求一个可靠的API来获取准确的北京时间。例如,使用一些公共的时间API,或者自己搭建后端服务返回当前时间。 另外,需要考虑代码实现的步骤。首先,用户可能需要一个函数来生成北京时间,无论是基于本地时间调整还是从服务器获取。然后,需要定时更新显示的时间,使用setInterval每秒更新一次。同时,处理可能的网络延迟问题,如果使用服务器时间,需要处理异步请求和错误处理。 还要考虑到用户可能没有后端支持,只能依赖前端实现的情况。这时候,只能通过调整本地时间到UTC+8,提醒用户这种方法可能不准确。同时,可以建议结合两种方法,先尝试从服务器获取时间,失败后再使用本地时间调整作为备选方案。 最后,需要检查是否有相关的库或插件可以使用,比如使用moment-timezone库来处理时区转换,但用户可能需要引入额外的库。不过,根据引用内容,用户提到了ES6和qrious库,可能对引入其他库持开放态度。不过,原生的JavaScript实现可能更受青睐,避免增加依赖。 总结步骤:1. 使用Date对象调整到UTC+8时间;2. 通过服务器API获取准确时间;3. 定时更新显示;4. 处理可能的错误和备选方案。同时,给出代码示例,说明优缺点。此外,生成相关问题,帮助用户进一步了解时间处理、时区转换和优化方法。</think>### 分步实现获取北京时间的方法 #### 方法1:通过JavaScript的`Date`对象调整时区 1. **获取本地时间转换为UTC+8** JavaScript的`Date`对象默认基于用户本地时区,可通过UTC时间计算北京时间(UTC+8): ```javascript function getBeijingTime() { const date = new Date(); // 计算UTC+8小时 const beijingHours = (date.getUTCHours() + 8) % 24; return { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1, // 月份从0开始,需+1 day: date.getUTCDate(), hours: beijingHours, minutes: date.getUTCMinutes(), seconds: date.getUTCSeconds() }; } ``` 2. **实时更新显示** 使用`setInterval`每秒更新一次时间: ```javascript function updateTime() { const beijingTime = getBeijingTime(); const timeString = `${beijingTime.year}-${beijingTime.month}-${beijingTime.day} ${beijingTime.hours}:${beijingTime.minutes}:${beijingTime.seconds}`; document.getElementById('time-display').textContent = timeString; } setInterval(updateTime, 1000); ``` **缺点**:依赖客户端系统时间,若用户设备时区或时间错误,结果不准确[^1]。 --- #### 方法2:通过服务器API获取准确时间 1. **调用公共时间API** 使用第三方接口(如`worldtimeapi.org`)获取标准时间: ```javascript async function fetchBeijingTime() { try { const response = await fetch('http://worldtimeapi.org/api/timezone/Asia/Shanghai'); const data = await response.json(); const serverTime = new Date(data.utc_datetime); return serverTime; } catch (error) { console.error('时间获取失败,回退到本地计算', error); return new Date(); // 失败时回退到本地时间 } } ``` 2. **周期性同步时间** 首次加载时调用API,之后通过前端定时器更新: ```javascript let beijingTime = await fetchBeijingTime(); setInterval(() => { beijingTime.setSeconds(beijingTime.getSeconds() + 1); // 更新页面显示... }, 1000); ``` **优点**:时间准确性高,不受客户端影响[^3]。 --- #### 方法3:结合服务器时间和前端校准 1. **计算时间差** 首次通过API获取服务器时间,计算与本地时间的差值: ```javascript let timeDiff = 0; // 服务器时间 - 本地时间 async function syncTime() { const start = Date.now(); const serverTime = await fetchBeijingTime(); const end = Date.now(); const latency = end - start; timeDiff = serverTime.getTime() - (end - latency / 2); } // 每小时同步一次 syncTime(); setInterval(syncTime, 3600000); ``` 2. **生成校准后的时间** 基于时间差动态计算: ```javascript function getCalibratedTime() { return new Date(Date.now() + timeDiff); } ``` --- ### 完整示例代码 ```html <!DOCTYPE html> <html> <body> <div id="time-display"></div> <script> // 方法1:本地计算(快速但不精确) function displayLocalBeijingTime() { const date = new Date(); const beijingTime = new Date(date.getTime() + (8 - date.getTimezoneOffset() / 60) * 3600 * 1000); document.getElementById('time-display').textContent = beijingTime.toLocaleString('zh-CN'); } // 方法2:API获取(精确但依赖网络) async function displayAPIBasedTime() { try { const response = await fetch('https://worldtimeapi.org/api/timezone/Asia/Shanghai'); const data = await response.json(); const serverTime = new Date(data.utc_datetime); document.getElementById('time-display').textContent = serverTime.toLocaleString('zh-CN'); } catch { displayLocalBeijingTime(); // 降级处理 } } // 初始化 displayAPIBasedTime(); setInterval(displayAPIBasedTime, 60000); // 每分钟同步一次 </script> </body> </html> ``` --- ### 关键注意事项 1. **时区处理** 北京时间为UTC+8,需确保服务器返回的时间已包含时区信息(如ISO 8601格式)[^3]。 2. **性能优化** 频繁调用API可能导致网络开销,建议结合本地计时器与定期校准。 3. **错误处理** 网络请求需添加`try/catch`,失败时回退到本地计算。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值