jQuery实现商品活动倒计时(使用jquery实现的项目)

编辑：rootadmin

推荐整理分享jQuery实现商品活动倒计时(使用jquery实现的项目)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery商品展示,jquery设计作品成品,jquery设计作品成品,jquery实例,jquery实战项目,jquery商品展示,jquery实现购物功能,jquery商品展示,内容如对您有帮助，希望把文章链接给更多的朋友！

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛，如考试系统倒计时，团购网站中的优惠活动倒计时等等。今天，我们来使用jQuery实现一个简单的倒计时功能。

本文以团购网站的倒计时为背景，我们知道，网站会给每个优惠活动（商品）定一个结束时间，也就是到期时间，但系统时间到达了结束时间，就意味着活动结束。因此，我们在HTML中就要定义活动的结束时间。HTML

上述html代码中，我们建立了一个列表，用于展示活动名称、图片和倒计时，关键的是我们在每个活动定义了结束时间：.endtime属性value的值，这个值是一串数字，表示自年1月1日以来的秒数，由后台（PHP）生成。比如结束时间-- :可以通过PHP转换为秒，转换后的秒数可以用来接下来的jQuery计算倒计时。CSS我们需要给页面中的列表实际一个稍微好看点的外观。

保存，预览页面效果，可以看到一个排列整齐的活动列表。jQuery

我们首先获取服务器时间，我们要将倒计时与服务器时间保持一致，这样一来每个客户端看到的倒计时是一样的，我们通过计算客户端与服务器的时间偏移量，来避免了因客户机器时间与服务器时间不一致而引起的倒计时不同步的麻烦。当然这个服务器时间需要使用服务端语言来获取，本文使用了PHP的time()函数获取的秒数，记得要乘以转换成毫秒数。我们通过setInterval建立一个定时器，并且每个毫秒执行一次setInterval里面的代码。然后在定时器里，我们使用jQuery的each()方法，遍历页面中的列表，计算天、小时、分、秒。因为javascript的getTime()函数获取的是毫秒数，所以计算过程中都要/，我们并不想在一个页面将列表中所有的倒计时都显示出来，而需要用户将鼠标滑向列表中的图片才显示对应的倒计时，因此我们还需要加入以下辅助代码：

最终效果图：

标签: 使用jquery实现的项目

本文链接地址:https://www.jiuchutong.com/biancheng/370407.html 转载请保留说明！

上一篇：jQuery实现简易的天天爱消除小游戏(jquery的实现原理)

下一篇：基于jquery实现复选框全选，反选，全不选等功能(jquery如何赋值)