秒杀倒计时文件
2014-04-30 16:49
330 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
;(function($) {
$.fn.CountDown = function(options) {
var defaultVal = {
startTime : 'startTime', // 存放开始时间
endTime : 'endTime', // 存放结束时间
serverTime:'serverTime',
wTime : 100, // 以100毫秒为单位进行演算
startText : '<font style="font-size:14px;color:red;font-weight:bold">还有%D%天%H%小时%M%分%S%秒开始秒杀</font>', // 显示的文本模版
endText : '<font style="font-size:14px;color:red;font-weight:bold">还有%D%天%H%小时%M%分%S%秒秒杀结束</font>', // 显示的文本模版
outText : '<font style="font-size:14px;color:red;font-weight:bold">秒杀已经结束</font>'// 过期显示的文本模版
};
var s = $.extend(defaultVal, options);
var _this = $(this);
var nowTime = s.serverTime;
var runTime = function() {
_this.each(function() {
var nthis = $(this);
var sorgT = s.startTime ;//开始时间戳
var eorgT = s.endTime;//结束时间戳
//var nowTime=new Date().getTime();
var sT = isNaN(sorgT) ? 0 : sorgT - nowTime;//开始时间-当前时间
var eT = isNaN(eorgT) ? 0 : eorgT - nowTime;//开始时间-结束时间
var showTime = function(rT, showTpl) {
//剩余时间
var _seconds = Math.round((rT % 60000) / s.wTime);
var sxp = Math.round(1000 / s.wTime).toString().length - 1;
_seconds = (_seconds / 1000 * s.wTime).toFixed(sxp);
var _minutes = Math.floor((rT % 3600000) / 60000);
var _hours = Math.floor((rT % 86400000) / 3600000);
var _days = Math.floor(rT / 86400000);
nthis.html(showTpl.replace(/%S%/, _seconds).replace(/%M%/, _minutes).replace(/%H%/, _hours).replace(/%D%/, _days));
};
if (sT > 0) {
showTime(sT, s.startText);
} else if (eT > 0) {
showTime(eT, s.endText);
} else {
nthis.html(s.outText);
}
});
nowTime=nowTime+s.wTime;
};
setInterval(function() {
runTime();
}, s.wTime);
};
})(jQuery);
</script>
</head>
<body>
<div class="time"></div>
<div class="time2"></div>
<div class="time"></div>
<div class="time"></div>
<div class="time"></div>
<script type="text/javascript">
$(function(){
$(".time").CountDown({
startTime:1399760782258,
endTime:1399760792258,
serverTime:1399760772258
});
$(".time2").CountDown({
startTime:1398751759299,
endTime:1398751779299,
serverTime:1398751649299
});
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
;(function($) {
$.fn.CountDown = function(options) {
var defaultVal = {
startTime : 'startTime', // 存放开始时间
endTime : 'endTime', // 存放结束时间
serverTime:'serverTime',
wTime : 100, // 以100毫秒为单位进行演算
startText : '<font style="font-size:14px;color:red;font-weight:bold">还有%D%天%H%小时%M%分%S%秒开始秒杀</font>', // 显示的文本模版
endText : '<font style="font-size:14px;color:red;font-weight:bold">还有%D%天%H%小时%M%分%S%秒秒杀结束</font>', // 显示的文本模版
outText : '<font style="font-size:14px;color:red;font-weight:bold">秒杀已经结束</font>'// 过期显示的文本模版
};
var s = $.extend(defaultVal, options);
var _this = $(this);
var nowTime = s.serverTime;
var runTime = function() {
_this.each(function() {
var nthis = $(this);
var sorgT = s.startTime ;//开始时间戳
var eorgT = s.endTime;//结束时间戳
//var nowTime=new Date().getTime();
var sT = isNaN(sorgT) ? 0 : sorgT - nowTime;//开始时间-当前时间
var eT = isNaN(eorgT) ? 0 : eorgT - nowTime;//开始时间-结束时间
var showTime = function(rT, showTpl) {
//剩余时间
var _seconds = Math.round((rT % 60000) / s.wTime);
var sxp = Math.round(1000 / s.wTime).toString().length - 1;
_seconds = (_seconds / 1000 * s.wTime).toFixed(sxp);
var _minutes = Math.floor((rT % 3600000) / 60000);
var _hours = Math.floor((rT % 86400000) / 3600000);
var _days = Math.floor(rT / 86400000);
nthis.html(showTpl.replace(/%S%/, _seconds).replace(/%M%/, _minutes).replace(/%H%/, _hours).replace(/%D%/, _days));
};
if (sT > 0) {
showTime(sT, s.startText);
} else if (eT > 0) {
showTime(eT, s.endText);
} else {
nthis.html(s.outText);
}
});
nowTime=nowTime+s.wTime;
};
setInterval(function() {
runTime();
}, s.wTime);
};
})(jQuery);
</script>
</head>
<body>
<div class="time"></div>
<div class="time2"></div>
<div class="time"></div>
<div class="time"></div>
<div class="time"></div>
<script type="text/javascript">
$(function(){
$(".time").CountDown({
startTime:1399760782258,
endTime:1399760792258,
serverTime:1399760772258
});
$(".time2").CountDown({
startTime:1398751759299,
endTime:1398751779299,
serverTime:1398751649299
});
})
</script>
</body>
</html>
相关文章推荐
- C++的那些事:你真的了解引用吗
- 常用css属性查询表
- C++的那些事:函数全解析
- 商学院关注:社会对技能人才需求不断扩大
- 转】学习ZigBee入门-2
- 【算法】第 n 小数 nth_element
- PB6.5调用Web Service的办法
- cocos2d-x3.0 PageView
- 用C#实现C/S模式下软件自动在线升级
- SpringMVC同名参数属性简单解决方案obj.property
- 黑马程序员-Java文件复制代码
- 定制您的“微信/来往/易信和微博”的原创内容
- SqlServer_批量替换某字段值所包含的某字符串;
- Windows下安装Hadoop
- 插件
- object c @synthesize 自动生成setter,getter方法
- 多边形重心问题
- jquery扩展例子
- 软考倒计时24天:熟记点
- C++的那些事:表达式与语句