新建一个HTML5页面,当浏览该页面时,通过JS文件js1.js来获取服务器时间,并按照指定的时间格式动态地显示在页面中,当中断与服务器的联系再次浏览该页面时,仍然可以在页面中动态地显示时间
时间: 2023-12-10 10:06:00 浏览: 61
好的,下面是一个简单的实现方案:
1. 首先在HTML文件中引入JS文件,可以放在head标签内或者body标签内的任意位置,例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Time Display</title>
<script src="js1.js"></script>
</head>
<body>
<h1>当前时间:</h1>
<p id="time"></p>
</body>
</html>
```
2. 在JS文件中编写获取服务器时间并动态显示的逻辑,例如:
```javascript
// 获取服务器时间
function getServerTime() {
return new Date();
}
// 格式化时间
function formatTime(time) {
var year = time.getFullYear();
var month = time.getMonth() + 1;
var day = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
}
// 动态显示时间
function displayTime() {
var timeElem = document.getElementById("time");
var now = getServerTime();
var formatted = formatTime(now);
timeElem.innerHTML = formatted;
}
// 每秒钟更新一次时间
setInterval(displayTime, 1000);
// 在页面加载时立即显示时间
displayTime();
```
3. 在JS文件中加入断开与服务器的联系后仍然可以获取时间的逻辑,例如:
```javascript
// 获取本地时间
function getLocalTime() {
return new Date();
}
// 尝试获取服务器时间,如果失败则返回本地时间
function tryGetServerTime() {
try {
return getServerTime();
} catch (e) {
return getLocalTime();
}
}
// 动态显示时间
function displayTime() {
var timeElem = document.getElementById("time");
var now = tryGetServerTime();
var formatted = formatTime(now);
timeElem.innerHTML = formatted;
}
```
这样,即使与服务器的连接中断,页面仍然会显示本地时间,直到重新连接上服务器。
阅读全文