我有一个倒计时的页面,我想在每个午夜重置倒计时。我想每天午夜重置,从23小时59分59秒开始,一天到了da.y你能帮助我吗?这是html,css和javascript。现在手动修复到某个日期,但这对我不利。那可能吗?
<div class="wrapper">
<div class="clock">
<div class="column days">
<div class="timer" id="days"></div>
<div class="text">DAYS</div>
</div>
<div class="timer days">:</div>
<div class="column">
<div class="timer" id="hours"></div>
<div class="text">ORE</div>
</div>
<div class="timer">:</div>
<div class="column">
<div class="timer" id="minutes"></div>
<div class="text">MINUTE</div>
</div>
<div class="timer">:</div>
<div class="column">
<div class="timer" id="seconds"></div>
<div class="text">SECUNDE</div>
</div>
</div>
</div>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
outline: none;
font-weight: normal;
}
html {
height: 100%;
display: table;
width: 100%;
}
body {
background: #3498DB;
font-family: "Segoe UI", "Microsoft YaHei";
font-size: 18px;
height: 100%;
width: 100%;
min-width: 320px;
color: #fff;
display: table-cell;
vertical-align: middle;
}
.wrapper {
box-sizing: border-box;
width: 640px;
margin: 0 auto;
text-align: center;
}
.timer {
font-family: "Segment7Standard";
font-size: 60px;
display: inline-block;
vertical-align: top;
}
.clock {
margin-top: 30px;
}
.clock .column {
display: inline-block;
}
p {
line-height: 27px;
}
h1 {
font-size: 31px;
color: #ffffff;
margin-top: 20px;
margin-bottom: 20px;
}
h2 {
font-size: 16px;
color: #a3deff;
margin: 0 0 10px;
}
a {
color: #a3deff;
text-decoration: none;
}
.days {
display: none;
}
@media only screen and (max-width: 768px) {
.wrapper {
width: 100%;
padding: 0 20px;
}
.timer {
font-size: 35px;
}
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.clear-loading {
text-align: center;
margin: 0 auto;
position: relative;
box-sizing: border-box;
}
.spinner {
width: 100px;
height: 100px;
}
.spinner > span,
.spinner > span:before,
.spinner > span:after {
content: "";
display: block;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.spinner > span {
width: 100%;
height: 100%;
top: 0;
left: 0;
border-left-color: transparent;
-webkit-animation: effect-2 2s infinite linear;
-moz-animation: effect-2 2s infinite linear;
-o-animation: effect-2 2s infinite linear;
animation: effect-2 2s infinite linear;
}
.spinner > span:before {
width: 75%;
height: 75%;
border-right-color: transparent;
}
.spinner > span:after {
width: 50%;
height: 50%;
border-bottom-color: transparent;
}
@-webkit-keyframes effect-2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes effect-2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
$(function(){
function timer(settings){
var config = {
endDate: '2018-05-19 09:00',
timeZone: 'Europe/Dublin',
hours: $('#hours'),
minutes: $('#minutes'),
seconds: $('#seconds'),
newSubMessage: 'and should be back online in a few minutes...'
};
function prependZero(number){
return number < 10 ? '0' + number : number;
}
$.extend(true, config, settings || {});
var currentTime = moment();
var endDate = moment.tz(config.endDate, config.timeZone);
var diffTime = endDate.valueOf() - currentTime.valueOf();
var duration = moment.duration(diffTime, 'milliseconds');
var days = duration.days();
var interval = 1000;
var subMessage = $('.sub-message');
var clock = $('.clock');
if(diffTime < 0){
endEvent(subMessage, config.newSubMessage, clock);
return;
}
if(days > 0){
$('#days').text(prependZero(days));
$('.days').css('display', 'inline-block');
}
var intervalID = setInterval(function(){
duration = moment.duration(duration - interval, 'milliseconds');
var hours = duration.hours(),
minutes = duration.minutes(),
seconds = duration.seconds();
days = duration.days();
if(hours <= 0 && minutes <= 0 && seconds <= 0 && days <= 0){
clearInterval(intervalID);
endEvent(subMessage, config.newSubMessage, clock);
window.location.reload();
}
if(days === 0){
$('.days').hide();
}
$('#days').text(prependZero(days));
config.hours.text(prependZero(hours));
config.minutes.text(prependZero(minutes));
config.seconds.text(prependZero(seconds));
}, interval);
}
function endEvent($el, newText, hideEl){
$el.text(newText);
hideEl.hide();
}
timer();
});
答案 0 :(得分:0)
在这里编辑你的小提琴https://jsfiddle.net/zd82dav7/1/
添加了一个新的日期对象并将其用于结束日期:
endDate: dT.getFullYear() + "-" + prependZero(dT.getMonth() + 1) + "-" + prependZero(dT.getDate()) + ' 23:59',
现在它使用当前日期并将结束时间设置为当天的23:59。这意味着它会在时钟午夜过后23小时59分钟开始新的计数器。不确定结束时间是否支持秒...没有检查。但是你总是可以将它添加到字符串中。