File: /var/www/net/time.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #0091CE; /* 整個網頁的底色 */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* 防止滾動條顯示 */
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
color: #fff;
padding: 10px;
box-sizing: border-box;
}
.date {
font-size: 20px;
}
.time {
font-size: 30px; /* 放大字體 */
font-weight: bold; /* 設置粗體 */
}
</style>
</head>
<body>
<div class="container">
<div class="date">2023/01/01</div>
<div class="time">00:00:00</div>
</div>
<script>
// 1.获取元素
var dateElement = document.querySelector('.date');
var timeElement = document.querySelector('.time');
// 2.使用定时器每隔一秒更新一次
setInterval(getTime, 1000);
function getTime() {
// 3.利用时间函数获取系统时间
var time = new Date();
var year = time.getFullYear(); //年
year = year < 10 ? '0' + year : year;
var mon = time.getMonth() + 1; //月
mon = mon < 10 ? '0' + mon : mon;
var date = time.getDate(); //日
date = date < 10 ? '0' + date : date;
var h = time.getHours(); //小时
h = h < 10 ? '0' + h : h;
var m = time.getMinutes(); //分钟
m = m < 10 ? '0' + m : m;
var s = time.getSeconds(); //秒
s = s < 10 ? '0' + s : s;
// 更新日期和时间
dateElement.innerHTML = year + '/' + mon + '/' + date ;
timeElement.innerHTML = h + ':' + m + ':' + s;
}
</script>
</body>
</html>