gpt4 book ai didi

javascript - 自定义 Clockdown.js 以仅显示分钟和秒

转载 作者:行者123 更新时间:2023-11-28 06:45:33 26 4
gpt4 key购买 nike

我在 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'
}
});

最佳答案

只需为您不想显示的部分设置类 display:none;

div.clock-hours { display:none; }
div.clock-days { display:none; }

关于javascript - 自定义 Clockdown.js 以仅显示分钟和秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34069490/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com