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

相关文章

  • 一个支持任意尺寸的图片上下左右滑动效果

    一个支持任意尺寸的图片上下左右滑动效果

    如果你的网站风格适合,可以用这种方式来给页面布局,支持任意尺寸的图片滑动、上下左右滑动,需要的朋友可以参考下
    2014-08-08
  • jquery实现左右无缝轮播图

    jquery实现左右无缝轮播图

    这篇文章主要为大家详细介绍了基于jquery实现左右无缝轮播图的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法

    这篇文章主要介绍了JQuery鼠标移到小图显示大图效果的方法,涉及jQuery鼠标事件与图形操作技巧,需要的朋友可以参考下
    2015-06-06
  • jquery 追加tr和删除tr示例代码

    jquery 追加tr和删除tr示例代码

    追加tr和删除tr在使用中还是比较广泛,下面为大家介绍下jquery中时如何实现的,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • jquery获得keycode的示例代码

    jquery获得keycode的示例代码

    本篇文章主要是对jquery获得keycode的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jQuery背景插件backstretch使用指南

    jQuery背景插件backstretch使用指南

    Backstretch是一款简单的jQuery插件,可以帮助你给网页添加一个动态的背景图片,可以自动调整大小适应屏幕的尺寸,当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形,所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换
    2015-04-04
  • 十个迅速提升JQuery性能让你的JQuery跑得更快

    十个迅速提升JQuery性能让你的JQuery跑得更快

    jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外如何提升语言的性能,本文提供即刻提升你的脚本性能的十个步骤 简单的几步让你的JQuery跑得更快 需要的朋友可以参考下
    2012-12-12
  • jQuery实现最简单实用的分秒倒计时

    jQuery实现最简单实用的分秒倒计时

    这篇文章主要为大家详细介绍了jQuery实现最简单实用的分秒倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JQuery为页面Dom元素绑定事件及解除绑定方法

    JQuery为页面Dom元素绑定事件及解除绑定方法

    这篇文章主要介绍了JQuery为页面Dom元素绑定事件及解除绑定方法,需要的朋友可以参考下
    2014-04-04
  • jQuery实现简单轮播图效果

    jQuery实现简单轮播图效果

    这篇文章主要为大家详细介绍了jQuery实现简单轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论