HTML5世界時鐘是一種基于HTML5技術開發的交互式時鐘，它能夠在一個頁面上同時展示多個時區的時間，方便全球用戶查看不同國家或地區的當前時間。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5世界時鐘</title>
<script>
// 獲取當前時間
function getTime() {
var date = new Date();
return date.toLocaleTimeString();
}
// 設置不同時區的時間
function setTimeOffset(offset, elementId) {
var d = new Date();
d.setHours(d.getHours() + offset);
document.getElementById(elementId).innerHTML = d.toLocaleTimeString();
}
// 在頁面中添加時鐘
function addClock(city, offset) {
var clockContainer = document.createElement('div');
clockContainer.className = 'clock-container';
var cityName = document.createElement('h2');
cityName.innerHTML = city;
var clock = document.createElement('div');
clock.className = 'clock';
clock.id = city;
clock.innerHTML = getTime();
clockContainer.appendChild(cityName);
clockContainer.appendChild(clock);
document.body.appendChild(clockContainer);
setTimeOffset(offset, city);
setInterval(function() { setTimeOffset(offset, city); }, 1000);
}
// 初始化時鐘
function initClocks() {
addClock('北京', 8);
addClock('倫敦', 0);
addClock('紐約', -5);
addClock('東京', 9);
addClock('悉尼', 10);
}
window.onload = initClocks;
</script>
<style>
.clock-container {
text-align: center;
margin: 20px auto;
width: 250px;
}
.clock {
background-color: #f1f1f1;
border-radius: 50%;
height: 150px;
line-height: 150px;
margin: 20px auto;
width: 150px;
font-size: 40px;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
</body>
</html>上述代碼中，通過調用Date對象的toLocaleTimeString()方法獲取當前時間，使用setTimeOffset()函數設置不同時區的時間，并使用setInterval()方法每隔1秒更新時間。最后通過調用addClock()函數，在頁面上添加5個帶有不同時區的時鐘。通過HTML和CSS對時鐘進行樣式處理，讓其外觀美觀，易于閱讀。
上一篇mysql中文字符截取
下一篇html5專題頁面源代碼