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 相关文章推荐
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
承诺书模板
2014/08/30 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
英语教学课后反思
2016/02/15 职场文书