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


Posted in Javascript onSeptember 11, 2013
<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://3water.com/jiaoben/103648.html

Javascript 相关文章推荐
简约JS日历控件 实例代码
Jul 12 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
js实现简单的验证码
Dec 25 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
JS实现轮播图效果
Jan 11 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 #Javascript
extjs render 用法介绍
Sep 11 #Javascript
jQuery图片轮播的具体实现
Sep 11 #Javascript
Javascript倒计时页面跳转实例小结
Sep 11 #Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 #Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 #Javascript
jquery获取子节点和父节点的示例代码
Sep 10 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
十大使用PHP框架的理由
2015/09/26 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
PHP7 新增常量
2021/03/09 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
Javascript的闭包详解
2014/12/26 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python内置函数及功能简介汇总
2020/10/13 Python
python 模块导入问题汇总
2021/02/01 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
感恩教育月活动总结
2014/07/07 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python