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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
vue环境搭建简单教程
Nov 07 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
php 归并排序 数组交集
2011/05/10 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
使用js画图之画切线
2015/01/12 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
pycharm安装图文教程
2017/05/02 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python实现图像的垂直投影示例
2020/01/17 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
青年文明号创建承诺
2014/03/31 职场文书
大四毕业生自荐书
2014/07/05 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
针对吵架老公保证书
2015/05/08 职场文书
院系推荐意见
2015/06/05 职场文书
收入证明怎么写
2015/06/12 职场文书
大学生受助感言
2015/08/01 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Python中time标准库的使用教程
2022/04/13 Python