html时区时间显示,js显示多个国家时区当前时间代码
时间: 2024-01-14 22:00:45 浏览: 52
在HTML中显示时区时间可以通过使用`<span>`标签结合JavaScript实现。首先在HTML中创建多个`<span>`标签,分别用于显示不同国家的当前时间。然后在JavaScript中获取当前时间并根据不同国家的时区进行调整,最后更新每个`<span>`标签的内容以显示当前时间。
以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>多个国家时区时间显示</title>
</head>
<body>
<h1>多个国家时区当前时间</h1>
<div>
<h3>美国纽约:</h3>
<span id="us-time"></span>
</div>
<div>
<h3>中国北京:</h3>
<span id="cn-time"></span>
</div>
<div>
<h3>英国伦敦:</h3>
<span id="uk-time"></span>
</div>
<script>
function displayTime() {
var usTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"});
var cnTime = new Date().toLocaleString("zh-CN", {timeZone: "Asia/Shanghai"});
var ukTime = new Date().toLocaleString("en-GB", {timeZone: "Europe/London"});
document.getElementById('us-time').innerText = usTime;
document.getElementById('cn-time').innerText = cnTime;
document.getElementById('uk-time').innerText = ukTime;
}
// 每秒更新一次时间
setInterval(displayTime, 1000);
</script>
</body>
</html>
```
上述代码中,首先在HTML中创建了用于显示美国纽约、中国北京和英国伦敦当前时间的`<span>`标签。然后在JavaScript中定义了`displayTime`函数,该函数获取当前时间并根据不同时区进行调整,并将结果更新到相应的`<span>`中。最后通过`setInterval`函数每秒钟更新一次时间。这样就能够实现在HTML页面上显示多个国家的当前时间。