我正在使用这个jQuery文件中的倒计时器,但我想把它的天数和小时数去掉,这样它就只显示分和秒。谁能帮帮我?数字是由一个png文件显示的,当它显示倒计时时,会产生一个翻板效果。
jQuery.fn.countdown = function(userOptions)
{
// Default options
var options = {
stepTime: 60,
// startTime and format MUST follow the same format.
// also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
format: "dd:hh:mm:ss",
startTime: "01:12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function(){},
image: "digits.png"
};
var digits = [], interval;
// Draw digits in given container
var createDigits = function(where)
{
var c = 0;
// Iterate each startTime digit, if it is not a digit
// we'll asume that it's a separator
for (var i = 0; i < options.startTime.length; i++)
{
if (parseInt(options.startTime[i]) >= 0)
{
elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
height: options.digitHeight * options.digitImages * 10,
float: 'left', background: 'url(\'' + options.image + '\')',
width: options.digitWidth});
digits.push(elem);
margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
options.digitImages)));
digits[c].__max = 9;
// Add max digits, for example, first digit of minutes (mm) has
// a max of 5. Conditional max is used when the left digit has reach
// the max. For example second "hours" digit has a conditional max of 4
switch (options.format[i]) {
case 'h':
digits[c].__max = (c % 2 == 0) ? 2: 9;
if (c % 2 == 0)
digits[c].__condmax = 4;
break;
case 'd':
digits[c].__max = 9;
break;
case 'm':
case 's':
digits[c].__max = (c % 2 == 0) ? 5: 9;
}
++c;
}
else
elem = $('<div class="cntSeparator"/>').css({float: 'left'})
.text(options.startTime[i]);
where.append(elem)
}
};
// Set or get element margin
var margin = function(elem, val)
{
if (val !== undefined)
return digits[elem].css({'marginTop': val + 'px'});
return parseInt(digits[elem].css('marginTop').replace('px', ''));
};
// Makes the movement. This is done by "digitImages" steps.
var moveStep = function(elem)
{
digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
return function _move() {
mtop = margin(elem) + options.digitHeight;
if (mtop == options.digitHeight) {
margin(elem, digits[elem]._digitInitial);
if (elem > 0) moveStep(elem - 1)();
else
{
clearInterval(interval);
for (var i=0; i < digits.length; i++) margin(i, 0);
options.timerEnd();
return;
}
if ((elem > 0) && (digits[elem].__condmax !== undefined) &&
(digits[elem - 1]._digitInitial == margin(elem - 1)))
margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
return;
}
margin(elem, mtop);
if (margin(elem) / options.digitHeight % options.digitImages != 0)
setTimeout(_move, options.stepTime);
if (mtop == 0) digits[elem].__ismax = true;
}
};
$.extend(options, userOptions);
this.css({height: options.digitHeight, overflow: 'hidden'});
createDigits(this);
interval = setInterval(moveStep(digits.length - 1), 1000);
};
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Countdown that doesn't sucks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'img/digits.png',
startTime: '00:00:05:00'
});
});
</script>
<style type="text/css">
br { clear: both; }
.cntSeparator {
font-size: 54px;
margin: 10px 7px;
color: #000;
}
.desc { margin: 7px 3px; }
.desc div {
float: left;
font-family: Arial;
width: 70px;
margin-right: 65px;
font-size: 13px;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
改变startTime和格式使用 mm:ss
如果你需要在隐藏数字的同时,仍然有天数和小时数的倒数,你可以使用style="-"的方式。overflow:hidden; left: -50%
jQuery.fn.countdown = function(userOptions)
{
// Default options
var options = {
stepTime: 60,
// startTime and format MUST follow the same format.
// also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
format: "dd:hh:mm:ss",
startTime: "01:12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function(){},
image: "digits.png"
};
var digits = [], interval;
// Draw digits in given container
var createDigits = function(where)
{
var c = 0;
// Iterate each startTime digit, if it is not a digit
// we'll asume that it's a separator
for (var i = 0; i < options.startTime.length; i++)
{
if (parseInt(options.startTime[i]) >= 0)
{
elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
height: options.digitHeight * options.digitImages * 10,
float: 'left', background: 'url(\'' + options.image + '\')',
width: options.digitWidth});
digits.push(elem);
margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
options.digitImages)));
digits[c].__max = 9;
// Add max digits, for example, first digit of minutes (mm) has
// a max of 5. Conditional max is used when the left digit has reach
// the max. For example second "hours" digit has a conditional max of 4
switch (options.format[i]) {
case 'h':
digits[c].__max = (c % 2 == 0) ? 2: 9;
if (c % 2 == 0)
digits[c].__condmax = 4;
break;
case 'd':
digits[c].__max = 9;
break;
case 'm':
case 's':
digits[c].__max = (c % 2 == 0) ? 5: 9;
}
++c;
}
else
elem = $('<div class="cntSeparator"/>').css({float: 'left'})
.text(options.startTime[i]);
where.append(elem)
}
};
// Set or get element margin
var margin = function(elem, val)
{
if (val !== undefined)
return digits[elem].css({'marginTop': val + 'px'});
return parseInt(digits[elem].css('marginTop').replace('px', ''));
};
// Makes the movement. This is done by "digitImages" steps.
var moveStep = function(elem)
{
digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
return function _move() {
mtop = margin(elem) + options.digitHeight;
if (mtop == options.digitHeight) {
margin(elem, digits[elem]._digitInitial);
if (elem > 0) moveStep(elem - 1)();
else
{
clearInterval(interval);
for (var i=0; i < digits.length; i++) margin(i, 0);
options.timerEnd();
return;
}
if ((elem > 0) && (digits[elem].__condmax !== undefined) &&
(digits[elem - 1]._digitInitial == margin(elem - 1)))
margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
return;
}
margin(elem, mtop);
if (margin(elem) / options.digitHeight % options.digitImages != 0)
setTimeout(_move, options.stepTime);
if (mtop == 0) digits[elem].__ismax = true;
}
};
$.extend(options, userOptions);
this.css({height: options.digitHeight, overflow: 'hidden'});
createDigits(this);
interval = setInterval(moveStep(digits.length - 1), 1000);
};
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Countdown that doesn't sucks</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'https://i.ibb.co/5hvG3DY/digits.png',
startTime: '05:00',
format: "mm:ss"
});
});
</script>
<style type="text/css">
br { clear: both; }
.cntSeparator {
font-size: 54px;
margin: 10px 7px;
color: #000;
}
.desc { margin: 7px 3px; }
.desc div {
float: left;
font-family: Arial;
width: 70px;
margin-right: 65px;
font-size: 13px;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div id="counter"></div>
</body>
</html>
倒计时在循环中生成html for (var i = 0; i < options.startTime.length; i++){}
它的工作原理是基于你的init输入。开始时间所以,在你的情况下 "00:00:05:00"
......而不是全长,你只需要通过 "05:00"
将为你工作。
这里是修改后的代码。
<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'img/digits.png',
startTime: '05:00'
});
});
</script>
你需要修改迭代时间的函数,因为它取决于startTime参数的长度。在createDigits函数中,你可以添加display: none样式来隐藏前4位数字和分隔符。
else
elem = $('<div class="cntSeparator"/>').css({float: 'left'})
.text(options.startTime[i]);
// ---- this hides the first 6 elements
if (i < 6) {
elem.css('display', 'none');
}
// -----
where.append(elem)
这让你可以用天和小时来指定时间,但只显示分和秒。
另一方面,如果你只是修改html中的startTime为 "05:00",你也可以在不接触函数的情况下让它工作,但我理解你希望指定完整的时间。
要想只显示小时和分钟,请使用正确的启动时间和格式参数。
$(function(){
$('#counter').countdown({
image: 'img/digits.png',
format: "dd:hh:mm:ss",
startTime: '05:00'
});
});
使用momentjs包。https:/cdnjs.comlibrariesmoment.js。你可以这样格式化timedata的值。
moment(time).format('/*Your format*/')
你可以在文档中找到格式化的方法。https:/momentjs.com。