使用js写一个好看的页面,页面上实时显示当前时间与历史某一时间的时间差,历史时间在代码中定义而不是在页面上选择
时间: 2023-05-19 14:05:34 浏览: 35
好的,这是一个很有趣的问题。以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>时间差计算器</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f5f5f5;
}
.container {
margin: 0 auto;
max-width: 800px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 32px;
margin-top: 0;
}
.time-diff {
font-size: 24px;
margin-top: 20px;
}
.time-diff span {
color: #f00;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>时间差计算器</h1>
<p>当前时间:<span id="current-time"></span></p>
<p>历史时间:<span id="history-time"></span></p>
<p class="time-diff">时间差:<span id="time-diff"></span></p>
</div>
<script>
// 定义历史时间
var historyTime = new Date('2020-01-01T00:00:00');
// 更新当前时间
function updateTime() {
var now = new Date();
document.getElementById('current-time').textContent = now.toLocaleString();
document.getElementById('time-diff').textContent = getTimeDiff(now, historyTime);
}
// 计算时间差
function getTimeDiff(now, history) {
var diff = now.getTime() - history.getTime();
var seconds = Math.floor(diff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
return days + ' 天 ' + (hours % 24) + ' 小时 ' + (minutes % 60) + ' 分钟 ' + (seconds % 60) + ' 秒';
}
// 初始化页面
document.getElementById('history-time').textContent = historyTime.toLocaleString();
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
```
这个页面使用了 HTML、CSS 和 JavaScript,它会实时显示当前时间和历史时间的时间差。历史时间在代码中定义,而不是在页面上选择。页面的样式比较简单,但是足够好看。