【发布时间】：2015-12-03 15:13:59
【问题描述】：
我在CodePen上有这个模板
我确实尝试过将其自定义为仅显示分钟和秒，但我做不到。
我错过了什么？
我的下一步是添加按钮来设置分钟、暂停和重置倒计时，我该怎么做？
提前致谢！
HTML：
<body>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3" id="days">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
</div>
<!-- /.clock -->
</div>
<!-- /.countdown-wrapper -->
</body>
CSS：
html, body {
height: 100%;
}
html {
background-image: url('http://i.imgur.com/E7djQGn.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('http://i.imgur.com/AOEi9ts.png');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
}
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
.clock-item {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.clock-item {
margin: 0px 30px 30px 30px;
}
}
JS：
var today = new Date();
// My target date is this month 30th 9.25pm
var target = new Date(today);
//target.setDate(2);
target.setHours(21,25,0,0);
// Countdown start from yesterday
var yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
yesterday.setHours(0,0,0,0);
$('.countdown').final_countdown({
'start': yesterday.getTime() / 1000,
'end': target.getTime() / 1000,
'now': today.getTime() / 1000,
seconds: {
borderColor: '#8ef58e',
borderWidth: '0.5'
},
minutes: {
borderColor: '#ff8d72',
borderWidth: '0.5'
},
hours: {
borderColor: '#69ccff',
borderWidth: '0.5'
},
days: {
borderColor: '#ffd35c',
borderWidth: '0.5'
}
});
【问题讨论】：
-
我确信您在尝试提交问题时已被指出，请在问题本身中包含相关代码。
-
@Roope 类似吗？
标签： javascript jquery css jquery-countdown