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中的细节分析
Jun 30 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP定时任务延缓执行的实现
2014/10/08 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
Less 安装及基本用法
2018/05/05 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Numpy之reshape()使用详解
2019/12/26 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
新手学python应该下哪个版本
2020/06/11 Python
python如何求圆的面积
2020/07/01 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
生日主持词
2014/03/20 职场文书
大学生读书笔记大全
2015/07/01 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
教导处教学工作总结
2015/08/12 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python  lambda匿名函数和三元运算符
2022/04/19 Python