正文

轻松学会：如何用jQuery在表单中自动获取并显示当前时间

/0 浏览量
0522

在网页设计中，显示当前时间是一个常见的功能，它可以让用户了解数据的时间戳，增加页面的互动性。使用jQuery来实现这一功能非常简单，下面我将详细讲解如何用jQuery在表单中自动获取并显示当前时间。

准备工作

在开始之前，请确保你的网页中已经引入了jQuery库。你可以通过CDN引入最新版本的jQuery，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

获取并显示当前时间

HTML结构

首先，我们需要一个简单的HTML结构，用于显示时间：

<form>
  <label for="current-time">当前时间：</label>
  <input type="text" id="current-time" readonly>
</form>

CSS样式

为了使时间显示更加美观，我们可以添加一些基本的CSS样式：

#current-time {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

jQuery脚本

接下来，我们将使用jQuery来获取当前时间，并将其显示在表单的输入框中。以下是完整的jQuery脚本：

$(document).ready(function() {
  function updateTime() {
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    $('#current-time').val(hours + ':' + minutes + ':' + seconds);
  }

  updateTime(); // 初始化时间显示
  setInterval(updateTime, 1000); // 每秒更新时间
});

解释

  1. $(document).ready(function() {...})：确保DOM完全加载后再执行脚本。
  2. updateTime函数：获取当前时间，并将其格式化为HH:mm:ss格式。
  3. $('#current-time').val(...)：将格式化后的时间赋值给输入框的值。
  4. setInterval(updateTime, 1000)：设置一个定时器，每秒调用updateTime函数更新时间。

总结

通过以上步骤，你可以在表单中自动获取并显示当前时间。使用jQuery可以轻松实现这一功能，而且代码简洁易懂。如果你有任何其他问题或建议，欢迎在评论区留言。

-- 展开阅读全文 --