脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 倒计时

jquery 倒计时效果实现秒杀思路

 更新时间：2013年09月11日 15:49:27   作者：  
公司做了个秒杀页面，需要做一个倒计时效果，感觉还特此收藏，喜欢的朋友也可以学习下
复制代码 代码如下:

<script type="text/javascript">
$(function(){
countDown("2015/9/8 11:11:59","#colockbox1");
});
function countDown(time,id){
var day_elem = $(id).find('.day');
var hour_elem = $(id).find('.hour');
var minute_elem = $(id).find('.minute');
var second_elem = $(id).find('.second');

//if(typeof end_time == "string")
var end_time = new Date(time).getTime(),//月份是实际月份-1
sys_second = (end_time-new Date().getTime())/1000;
var timer = setInterval(function(){
if (sys_second > 1) {
sys_second -= 1;
var day = Math.floor((sys_second / 3600) / 24);
var hour = Math.floor((sys_second / 3600) % 24);
var minute = Math.floor((sys_second / 60) % 60);
var second = Math.floor(sys_second % 60);
day_elem && $(day_elem).text(day);//计算天
$(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
$(minute_elem).text(minute<10?"0"+minute:minute);//计算分钟
$(second_elem).text(second<10?"0"+second:second);//计算秒杀
} else {
clearInterval(timer);
}
}, 1000);
}
</script>

html:
复制代码 代码如下:

<div class="colockbox" id="colockbox1">
<span class="day">00</span>
<span class="hour">00</span>
<span class="minute">00</span>
<span class="second">00</span>
</div>

公司做了个秒杀页面，需要做一个倒计时效果，特此收藏

代码演示下载：https://www.jb51.net/jiaoben/103648.html
您可能感兴趣的文章:

相关文章

  • 原生JS实现在线问卷调查投票特效

    原生JS实现在线问卷调查投票特效

    本文主要分享了原生JS实现在线问卷调查投票特效的实例代码。可直接复制保存HTML运行查看效果。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • jQuery中事件与动画的总结分享

    jQuery中事件与动画的总结分享

    下面小编就为大家带来一篇jQuery中事件与动画的总结分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery实现首页图片淡入淡出效果的方法

    jQuery实现首页图片淡入淡出效果的方法

    这篇文章主要介绍了jQuery实现首页图片淡入淡出效果的方法,实例分析了jQuery图片淡入淡出效果的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • 妙用Jquery的val()方法

    妙用Jquery的val()方法

    Jquery的val()方法不仅能够设置元素的值，同时也能获取元素的值。常见的操作是对文本框的操作，比如判断邮箱地址等
    2012-06-06
  • JQuery 构建客户/服务分离的链接模型中Table中的排序分析

    JQuery 构建客户/服务分离的链接模型中Table中的排序分析

    从上篇文章，我们实现了Table分页代码的高效性，咱们继续沿着这个思路，探讨Table表格数据中另外一个很常见的排序问题。说到排序，我记得在asp.net中 GridView中提供了这样的方便，只需在展示字段上加上 Sorting 这样的属性，基本就完成了，剩下就是服务端cs代码的写法了。
    2010-01-01
  • jquery 学习笔记 传智博客佟老师附详细注释

    jquery 学习笔记 传智博客佟老师附详细注释

    本人水平有限，在学习时请用批判的态度学习，有问题给我留言 传智博客佟老师 jqurey 学习笔记，以及例子代码详细注释。
    2009-07-07
  • 基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

    基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

    本篇文章基于jquery让数字时钟真正的跑起来，实现一个带有日期和星期的网页版数字时钟，效果非常逼真，感兴趣的朋友一起看看吧
    2015-11-11
  • jQuery中过滤器的基本用法示例

    jQuery中过滤器的基本用法示例

    这篇文章主要介绍了jQuery中过滤器的基本用法,结合简单实例形式分析了jQuery过滤器针对table表格元素属性进行判断与设置的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Jquery中的$.each获取各种返回类型数据的使用方法

    Jquery中的$.each获取各种返回类型数据的使用方法

    each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等，在javaScript开发过程中使用$each可以大大的减轻我们的工作量。
    2015-05-05
  • jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】

    jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】

    这篇文章主要介绍了jQuery实现点击按钮弹出可拖拽模态对话框的方法,结合完整实例形式分析了jQuery调用模态对话框的基本原理、实现方法与相关操作技巧,需要的朋友可以参考下
    2023-04-04

最新评论