当前位置：首页 > jquery

jquery 时钟

2026-02-03 18:41:34jquery

以下是一个使用 jQuery 实现实时时钟的完整方案，包含动态显示当前时间的功能：

HTML 结构

创建一个简单的容器用于显示时钟：

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

CSS 样式（可选）

为时钟添加基本样式：

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

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 : hours;
    minutes = (minutes < 10) ? "0" + minutes : minutes;
    seconds = (seconds < 10) ? "0" + seconds : seconds;

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

  // 初始调用
  updateClock();

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

功能扩展

如果需要显示日期：

function updateClock() {
  var now = new Date();
  var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  var dayName = days[now.getDay()];
  var date = now.getDate();
  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var monthName = months[now.getMonth()];
  var year = now.getFullYear();

  var timeString = dayName + ', ' + monthName + ' ' + date + ', ' + year + '<br>' + 
                   now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
  $('#clock').html(timeString);
}