文章/答案/技术大牛

发布

jquery 动态时间显示

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。动态时间显示是指在网页上实时显示当前时间，并且这个时间会随着时间的推移而不断更新。

类型

动态时间显示可以通过以下几种方式实现：

纯 JavaScript 实现：使用 JavaScript 的 Date 对象和定时器。
使用 jQuery 插件：如 jQuery.timeago 或自定义插件。

应用场景

动态时间显示常用于以下场景：

博客文章的发布时间。
社交媒体上的动态更新时间。
论坛帖子的发布时间。

示例代码

以下是一个使用 jQuery 实现动态时间显示的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Time Display</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="time"></div>

    <script>
        function updateTime() {
            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');
            $('#time').text(`${hours}:${minutes}:${seconds}`);
        }

        setInterval(updateTime, 1000);
        updateTime(); // 初始调用
    </script>
</body>
</html>

可能遇到的问题及解决方法

时间不更新：
- 原因：可能是定时器没有正确设置。
- 解决方法：确保 setInterval 的时间间隔设置正确，并且函数调用没有问题。

时间格式不正确：
- 原因：可能是时间格式化代码有误。
- 解决方法：检查时间格式化代码，确保小时、分钟和秒都正确地转换为两位数。
跨浏览器兼容性问题：
- 原因：不同浏览器对 JavaScript 的实现可能有所不同。
- 解决方法：使用 jQuery 来处理跨浏览器兼容性问题，确保代码在所有主流浏览器中都能正常运行。

通过以上方法，你可以实现一个简单且有效的动态时间显示功能。

页面内容是否对你有帮助？

有帮助

没帮助

单击display并将其更改为textbox

我可以看到带有列和行的表，这些列和行很好地显示了数据:产品名称和价格。我想在这里做的是按我喜欢的方式编辑数据。我点击产品，它会变成文本框，但仍然将数据保留在文本框中(意思是，它将不再是只读的)。我之前所做的是:每一行我都有一个复选框，点击这个复选框，我将使用jquery这样的东西来更改。true); } }); 但我现在不想要的是即使在开始时也不显示文本框中

浏览 2提问于2011-02-23得票数 0

回答已采纳

2回答

我有一个站点，响应用户交互，使用jquery动态创建div。div将在其中包含一个时间戳以显示其创建时间，用户可以单击一个按钮来显示或隐藏时间戳跨度。我遇到的问题是，当用户选择隐藏时间戳时，如何防止将来动态添加跨度显示？关于这个问题，我动态地在头部添加了一个样式标记。不过，我还打算允许用户从下拉列表中选择字体，并更改div中文本的字体样式。这两个问题都围绕着同一个问题:更改已经存在的元素和任何未来<

浏览 1提问于2015-08-05得票数 0

回答已采纳

1回答

Blogger上的动态数据图-使用什么？

、

我可以在Blogger.com上使用哪种技术来输出动态条形图，其中显示的记录数量是由用户通过按钮或滑块控制的？例如:显示前10名、前20名等。我的主要问题是我不确定1.如何在外部托管数据2.如何在web上动态输出数据请记住，我的PHP和JavaScript很弱，所以如果可能的话，我更喜欢其他的选择。

浏览 1提问于2015-04-27得票数 0

1回答

jquery flot图表不会动态更新时间序列的X轴值

、、、

我把一个示例代码放入 X轴是基于时间序列的。我动态设置值。我使用tickFormatter: function(value){}格式化我的时间，并在页面上显示。将显示第一次设置的值。但当稍后添加数据时，该函数似乎未被调用)，但不会显示动态设置的值。我不使用jquery flot time插件。如果图表值不是动态设置的，则图表将显示带有时间序列的x和y轴值。

浏览 2提问于2014-09-28得票数 1

2回答

Php Jquery Javascript预加载图像

、、、、

如果我遍历PHP并创建几个设置为display:none的图像，然后使用Jquery访问它们的可见性，这是否会增加页面加载时间，例如图像是否实际显示在页面上？如果是这样的话，有没有一种简单的方法来动态加载图像，比如如果用户选择了一个选项，出现了另一个图片库，但页面没有刷新(ajax?) 谢谢!

浏览 1提问于2011-07-21得票数 0

2回答

如何在动态创建的元素中应用jquery时间选择器(添加更多按钮)？

它显示所有元素时间下拉列表，但是当我将其应用于动态创建的文本字段时(通过javascript使用“添加更多”按钮动态创建表单元素)，它不起作用。下面是我实现的代码。<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"

浏览 2提问于2013-03-28得票数 1

回答已采纳

2回答

如何将jQuery工具提示附加到jQuery日期选择器

、、、、

我有jQuery UI日期选择器运行与一些突出显示的日期与自定义标题。我想做的是用jQuery UI工具提示显示这些标题。简化的代码(为简单起见，所有时间都高亮显示)： beforeShowDay: function(date我想这是因为日历是动态创建的，而工具提示没有附加到这些动态创建的链接上。如果我将最后一行改为<

浏览 6提问于2014-08-20得票数 0

2回答

在phonegap android中动态创建的字段不显示datetimepicker

、、、、

我正在动态创建一个输入字段来显示日期，我在正文中创建了字段，并给出了datetimepicker.when =‘datetimepicker’，然后它在应用程序中显示了datepicker，但当试图动态创建一个字段并给出类名datetimepicker时，它没有显示datepicker，有人能告诉我出了什么问题吗？以下是日期时间选择器的代码： var input_date=$(document.createElement('input')).attr('id

浏览 0提问于2013-08-24得票数 1

3回答

如何在母版页上显示动态时钟？

、、

我尝试了一下，并在谷歌上搜索了一段时间，但有一些例子对我来说非常复杂。我想在我的母版页上显示一个时钟，它应该是动态的。我对Jquery不是很熟悉，我得到的所有示例都是关于Jquery的。我还想显示每个刻度的冒号的闪烁，这将分隔时间。

浏览 0提问于2011-11-15得票数 2

回答已采纳

1回答

(xdsoft)：动态限制日期范围，并带有两个内联数据启动器

、、

使用Jquery插件可用的onShow:function( ct ){ minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepi

浏览 10提问于2015-08-04得票数 4

回答已采纳

1回答

Fancybox 2在没有元素的情况下启动时出现全局事件错误

、、、

我正在动态启动fancybox。我在低于1.9.0版本的jquery中使用这种方法已经有一段时间了，没有出现任何问题。此工具将在控制台中向您显示jquery迁移错误。

浏览 1提问于2013-02-05得票数 1

1回答

在页面上突出显示单词，就像jQuery.highlight()一样？

、

我目前正在使用jQuery.highlight()来突出显示页面上给定的单词并将它们链接起来。但是，如果我们有很多单词要检查并在页面上突出显示，则需要很长时间。我知道jQuery.highlight()是如何工作的，但是不知道我们是否可以用PHP实现同样的功能。 php中有没有像jQuery.highlight()那样突出显示单词并链接它们的功能呢？除了问题之外，我还想提一下，页面上可以有静态和动态内容。

浏览 2提问于2013-07-30得票数 0

2回答

如何知道css样式是否完全应用于动态添加的内容

、、

案例:内容被动态地添加到某个div中(使用jquery)。内容包含相当多的元素(比如1000个div)。然后我需要计算元素的正确尺寸(实际上我需要px中的top位置，所以我使用jquery position()函数)。首先，我在添加内容后立即开始计算。我使用的超时时间越长(我测试了20到500毫秒)，浏览器应用样式的时间就越长，错误计算的可能性就越小。

浏览 0提问于2013-02-07得票数 0

1回答

网站展示预览所需的建议

、、

我正在做一个项目，我的页面上有很多图像(比如100，它们都是动态内容)，我希望它们在鼠标悬停时显示一个带有图像、日期和时间、文本、标题的预览块。谢谢你的帮忙

浏览 2提问于2014-08-10得票数 0

回答已采纳

1回答

Responsove动画图像网格库

、、、

我想实现一个动画图片库，如下面的链接所示。 https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html 不同之处在于，随机图像切换将是一个增大/减小的fadeInOut动画，例如在2x2块中。我能在什么地方找到这样的脚本吗？谢谢!

浏览 14提问于2021-10-12得票数 0

1回答

在Nodejs中使用OTP(textlocal)登录

、、、

我正在尝试使用textlocal a在nodejs中创建具有otp的登录。我可以通过以下代码将otp发送到该号码，我如何验证OTP并重新登录成功。var urlencode = require('urlencode');var number='91*******';var hash='api'; // The hash key could be found

浏览 5提问于2020-11-27得票数 0

2回答

动态菜单与硬编码

、

我正在使用jQuery Mobile为客户端构建一个移动应用程序。我的问题是相当基础和非技术性的：如果已经有人问过这个问题，我深表歉意。

浏览 5提问于2012-08-21得票数 1

回答已采纳

1回答

用不同的hper链接连接Kendo网格中的行/列

、

我正在使用Kendo Grid显示我的搜索结果。下面是Kendo Grid的代码。jQuery dataSource: { schema: { buttonCount: 5 columns: gridData.viewFields$("#grid").kendoGrid('refresh'); 我将

浏览 3提问于2016-02-26得票数 0

回答已采纳

1回答

如何在"LightBox“这样的”虚拟窗口“中加载内容

、、

我喜欢Lightbox如何做覆盖窗口，显示完整大小的图像链接。有办法加载这样的html文件吗？我想要图片，文字，也许一个嵌入式youtube视频太能加载在“虚拟窗口”，垂直滚动也会很好。我想避免jquery或其他类似的事情。就像Java、html和css一样好。但是，如果不可能的话，如果需要的话，我可以处理调用jquery。Eva

浏览 1提问于2013-11-22得票数 0

回答已采纳

1回答

Ajax元素的VirtueMart“添加到购物车”发送到空购物车/结帐页面

、、、、

我正在开发一个模块，以加载Ajax分页系统的Virtumemart产品。问题是add to cart按钮只对第一个加载的产品有效(前4个产品加载，但它不会通过Ajax对新添加的产品起作用)。您能否建议一个解决方案，使添加到购物车选项通过Ajax在新加载的产品上工作(页面不会被刷新或再次加载，只通过Ajax加载产品) 在

浏览 3提问于2014-02-16得票数 0

点击加载更多