|
|
要在夜晚自动切换CSS，可以使用JavaScript来检测当前时间，并应用相应的CSS。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day/Night Mode Switcher</title>
<link id="theme-style" rel="stylesheet" href="day.css">
</head>
<body>
<script>
function switchTheme(time) {
if (time.getHours() >= 18 || time.getHours() < 6) {
document.getElementById('theme-style').href = 'night.css';
} else {
document.getElementById('theme-style').href = 'day.css';
}
}
// Check the current time and switch theme
switchTheme(new Date());
// Add a listener for changes to the time to check and switch theme
window.addEventListener('load', function() {
setInterval(function() {
switchTheme(new Date());
}, 1000 * 60); // Check every minute
});
</script>
</body>
</html>
在这个示例中，我们定义了一个switchTheme函数，它会根据当前时间切换到相应的CSS文件。我们使用new Date()获取当前时间，并根据当前时间的小时数来判断是否应该应用夜间模式。如果小时数在18到6之间（夜间），则切换到night.css，否则切换到day.css。
我们还在页面加载完成后设置了一个定时器，每分钟检查一次当前时间并切换主题。这样，只要用户打开网页，如果当前时间是晚上的时候，网页就会自动切换到夜间模式。
|
|
发表于 2024-4-3 22:29:13
