jquery时钟

2026-02-03 18:40:16jquery

以下是一个使用jQuery实现实时时钟的示例代码，包含HTML结构和JavaScript逻辑：

jquery时钟

HTML结构

<div id="clock"></div>

jQuery实现

$(document).ready(function() {
  function updateClock() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    // 添加前导零
    hours = (hours < 10 ? "0" : "") + hours;
    minutes = (minutes < 10 ? "0" : "") + minutes;
    seconds = (seconds < 10 ? "0" : "") + seconds;

    var timeString = hours + ":" + minutes + ":" + seconds;
    $("#clock").text(timeString);
  }

  // 初始调用
  updateClock();

  // 每秒更新一次
  setInterval(updateClock, 1000);
});

CSS样式（可选）

#clock {
  font-family: 'Arial', sans-serif;
  font-size: 48px;
  text-align: center;
  color: #333;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
}

功能扩展

如需添加日期显示，可修改updateClock函数：

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

var dayName = days[now.getDay()];
var monthName = months[now.getMonth()];
var date = now.getDate();
var year = now.getFullYear();

var dateString = dayName + ", " + monthName + " " + date + ", " + year;
$("#date").text(dateString);

确保在HTML中添加对应的日期显示元素：