HTML简约时钟插件代码
以下是一个使用jQuery和CSS创建简约时钟的示例代码：
- 首先，确保在HTML文件中包含jQuery库：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>- 接下来，添加时钟的HTML结构和CSS样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Clock</title>
<style>
body { font-family: Arial, sans-serif; }
#clock { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #000; }
#clock h1 { text-align: center; color: #555; }
#clock p { text-align: center; font-size: 20px; }
</style>
</head>
<body>
<div id="clock">
<h1>Simple Clock</h1>
<p id="time"></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
$('#time').text(hours + ':' + minutes + ':' + seconds);
}
$(document).ready(function() {
setInterval(updateClock, 1000);
updateClock();
});
</script>
</body>
</html>这段代码会在网页上显示一个简约时钟，并且会每秒更新时间。jQuery被用来处理DOM元素的交互，而CSS则负责时钟的样式展示。
评论已关闭