jquery 显示时间

原创

mob64ca12f1c6f8 2023-09-30 00:17:16 ©著作权

文章标签 获取当前时间代码示例 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f1c6f8的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 显示时间

在网页开发中，经常需要显示当前时间或者倒计时等功能。使用 jQuery 可以轻松地实现这些功能。本文将介绍如何使用 jQuery 来显示时间，并提供相关的代码示例。

1. 获取当前时间

首先，我们需要获取当前时间。JavaScript 提供了 Date 对象来处理日期和时间。通过 Date 对象的方法，我们可以获取年、月、日、时、分、秒等信息。

以下是获取当前时间的代码示例：

// 获取当前时间
var date = new Date();
var year = date.getFullYear();    // 年
var month = date.getMonth() + 1;  // 月（注意月份范围是 0-11）
var day = date.getDate();         // 日
var hour = date.getHours();       // 时
var minute = date.getMinutes();   // 分
var second = date.getSeconds();   // 秒

2. 显示时间

使用 jQuery 可以方便地将获取到的时间显示在网页上。一种常见的方式是将时间显示在一个 HTML 元素中，比如一个 <div> 或者 <span>。

以下是显示时间的代码示例：

<!-- HTML 代码 -->
<div id="time"></div>

// JavaScript 代码
// 获取当前时间
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

// 显示时间
var timeElement = $("#time");
timeElement.text(hour + ":" + minute + ":" + second);

上述代码首先通过 $("#time") 获取到 id 为 "time" 的元素，然后使用 text 方法将时间显示在该元素中。

3. 刷新时间

如果希望实时显示时间，我们可以使用 setInterval 函数来定时刷新时间。

以下是刷新时间的代码示例：

// 刷新时间
setInterval(function() {
  // 获取当前时间
  var date = new Date();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();

  // 显示时间
  var timeElement = $("#time");
  timeElement.text(hour + ":" + minute + ":" + second);
}, 1000);  // 每隔 1 秒刷新一次

上述代码使用了 setInterval 函数来定时执行一段代码，第一个参数是一个匿名函数，表示要执行的代码。在这里，我们获取当前时间并显示在网页上。

4. 完整示例

下面是一个完整的示例，将上述代码整合在一起：

<!-- HTML 代码 -->
<!DOCTYPE html>
<html>
<head>
  <title>显示时间</title>
  <script src="
  <script>
    $(document).ready(function() {
      setInterval(function() {
        // 获取当前时间
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        // 显示时间
        var timeElement = $("#time");
        timeElement.text(hour + ":" + minute + ":" + second);
      }, 1000);  // 每隔 1 秒刷新一次
    });
  </script>
</head>
<body>
  <div id="time"></div>
</body>
</html>

上述代码通过 jQuery 动态获取当前时间并实时显示在网页上。

5. 序列图

以下是使用 Mermaid 语法绘制的显示时间的序列图：

sequenceDiagram
  participant User
  participant Browser
  participant Server

  User->>Browser: 打开网页
  Browser->>Server: 请求网页
  Server->>Browser: 返回网页
  Browser->>User: 显示网页

  loop 刷新时间
    User->>Browser: 网页定时刷新
    Browser->>Server: 请求时间
    Server->>Browser: 返回时间
    Browser->>User: 显示时间
  end

上述序列图描述了用户打开网页，浏览器请求网页并返回，然后网页定时刷新时间的过程。