jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。简易时钟通常是指使用 jQuery 和 JavaScript 来创建一个简单的数字时钟或模拟时钟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易数字时钟</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#clock {
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
$('#clock').text(`${hours}:${minutes}:${seconds}`);
}
$(document).ready(function() {
setInterval(updateClock, 1000);
updateClock(); // 初始化时钟
});
</script>
</body>
</html>
setInterval
的时间间隔设置不正确,或者 updateClock
函数没有正确执行。setInterval
的时间间隔是否为 1000 毫秒(1 秒),确保 updateClock
函数在文档加载完成后立即执行一次。padStart
方法来格式化小时、分钟和秒,确保它们始终是两位数。通过以上方法,你可以创建一个简单的 jQuery 数字时钟,并解决可能遇到的常见问题。
没有搜到相关的文章