Js实现wordclock
JavaScript 实现 Word Clock
Word Clock 是一种以文字显示时间的时钟，通常将时间转换为自然语言描述。以下是使用 JavaScript 实现 Word Clock 的步骤。
初始化 HTML 结构
创建一个基本的 HTML 结构，包含一个用于显示 Word Clock 的容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Clock</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#wordClock {
font-size: 24px;
text-align: center;
}
.highlight {
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wordClock"></div>
<script src="wordclock.js"></script>
</body>
</html>创建 JavaScript 逻辑
在 wordclock.js 文件中实现 Word Clock 的核心逻辑。
document.addEventListener('DOMContentLoaded', function() {
const wordClock = document.getElementById('wordClock');
const words = [
"IT", "IS", "HALF", "TEN",
"QUARTER", "TWENTY", "FIVE", "MINUTES",
"TO", "PAST", "ONE", "TWO",
"THREE", "FOUR", "FIVE", "SIX",
"SEVEN", "EIGHT", "NINE", "TEN",
"ELEVEN", "TWELVE", "OCLOCK"
];
function updateWordClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
// Reset all words to default
wordClock.innerHTML = words.map(word =>
`<span class="word">${word}</span>`
).join(' ');
// Highlight "IT IS"
highlightWords(["IT", "IS"]);
// Determine minutes
if (minutes >= 5 && minutes < 10) {
highlightWords(["FIVE", "MINUTES", "PAST"]);
} else if (minutes >= 10 && minutes < 15) {
highlightWords(["TEN", "MINUTES", "PAST"]);
} else if (minutes >= 15 && minutes < 20) {
highlightWords(["QUARTER", "PAST"]);
} else if (minutes >= 20 && minutes < 25) {
highlightWords(["TWENTY", "MINUTES", "PAST"]);
} else if (minutes >= 25 && minutes < 30) {
highlightWords(["TWENTY", "FIVE", "MINUTES", "PAST"]);
} else if (minutes >= 30 && minutes < 35) {
highlightWords(["HALF", "PAST"]);
} else if (minutes >= 35 && minutes < 40) {
highlightWords(["TWENTY", "FIVE", "MINUTES", "TO"]);
} else if (minutes >= 40 && minutes < 45) {
highlightWords(["TWENTY", "MINUTES", "TO"]);
} else if (minutes >= 45 && minutes < 50) {
highlightWords(["QUARTER", "TO"]);
} else if (minutes >= 50 && minutes < 55) {
highlightWords(["TEN", "MINUTES", "TO"]);
} else if (minutes >= 55) {
highlightWords(["FIVE", "MINUTES", "TO"]);
}
// Determine hours
let hourWord;
if (minutes >= 35) {
hourWord = hours === 11 ? "TWELVE" : words[10 + (hours + 1)];
} else {
hourWord = hours === 0 ? "TWELVE" : words[10 + hours];
}
highlightWords([hourWord]);
// Highlight "OCLOCK" if minutes < 5
if (minutes < 5) {
highlightWords(["OCLOCK"]);
}
}
function highlightWords(wordsToHighlight) {
const wordElements = document.querySelectorAll('.word');
wordElements.forEach(el => {
if (wordsToHighlight.includes(el.textContent)) {
el.classList.add('highlight');
}
});
}
// Update every minute
updateWordClock();
setInterval(updateWordClock, 60000);
});功能说明
- 使用数组
words存储所有可能的单词。 updateWordClock函数根据当前时间计算需要高亮的单词。highlightWords函数负责高亮指定的单词。- 每分钟更新一次时钟显示。
自定义样式
通过修改 CSS 中的 .highlight 类，可以自定义高亮单词的样式。例如，更改颜色或字体大小。
.highlight {
color: #007bff;
font-weight: bold;
}扩展功能
- 添加多语言支持，例如中文或西班牙语。
- 引入动画效果，使单词高亮更加平滑。
- 支持 24 小时制或自定义时间格式。
通过以上步骤，可以实现一个基本的 Word Clock，并根据需求进行扩展和定制。
