手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 倒计时效果实现秒杀思路
jquery 倒计时效果实现秒杀思路
摘要:复制代码代码如下:$(function(){countDown("2015/9/811:11:59","#colockbox1");});f...

复制代码 代码如下:

<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 id="colockbox1">

<span>00</span>

<span>00</span>

<span>00</span>

<span>00</span>

</div>

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

代码演示下载:http://www.jb51.net/jiaoben/103648.html

【jquery 倒计时效果实现秒杀思路】相关文章:

jquery实现弹出层效果实例

jquery表单对象属性过滤选择器用法

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

JQuery中Text方法用法实例分析

jquery实现图片左右切换的方法

Jquery注册事件实现方法

JQuery分屏指示器图片轮换效果实例

jQuery实现文本展开收缩特效

jquery.validate使用时遇到的问题

JS+CSS实现的拖动分页效果实例

精品推荐
分类导航