要實現(xiàn)網(wǎng)頁實時顯示時間并懸浮在屏幕,可以使用HTML、CSS和JavaScript。以下是一個簡單的示例:
- 創(chuàng)建一個HTML文件,添加一個
<div>
元素用于顯示時間,以及一個<script>
標簽用于編寫JavaScript代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>實時顯示時間</title>
<style>
#time {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
}
const timeElement = document.getElementById('time');
setInterval(function () {
const currentTime = updateTime();
timeElement.innerText = currentTime;
}, 1000);
</script>
</body>
</html>
- 將上述代碼保存為一個名為
index.html
的文件,然后在瀏覽器中打開該文件。你將看到一個包含實時時間的元素,它會在屏幕的左上角懸浮顯示。
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。