我有一个时间(未来时间)数组,因此我需要通过与当前时间(HH:MM)进行比较以降序显示MM:SS格式的倒数计时器。因此,当计时器结束时,它将从新的当前HH:MM中跳转以查找下一个最高的计时器
如何执行此操作?
const futuretimes = ["5:00 AM" , "5:30 AM" , "5:45 AM" , "6:00 AM" , "6:15 AM" , "6:30 AM" , "6:40 AM" , "6:50 AM" , "7:00 AM" , "7:08 AM" , "7:16 AM" , "7:24 AM" , "7:35 AM" , "7:40 AM" , "7:45 AM" , "7:50 AM" , "7:55 AM" , "8:00 AM" , "8:05 AM" , "8:10 AM" , "8:15 AM" , "8:20 AM" , "8:25 AM" , "8:30 AM" , "8:34 AM" , "8:38 AM" , "8:42 AM" , "8:46 AM" , "8:50 AM" , "8:54 AM" , "8:58 AM" , "9:02 AM" , "9:06 AM" , "9:10 AM" , "9:15 AM" , "9:20 AM" , "9:25 AM" , "9:30 AM" , "9:35 AM" , "9:40 AM" , "9:45 AM" , "9:50 AM" , "9:55 AM" , "10:00 AM" , "10:06 AM" , "10:12 AM" , "10:18 AM" , "10:26 AM" , "10:34 AM" , "10:40 AM" , "10:50 AM" , "11:00 AM" , "11:10 AM" , "11:20 AM" , "11:30 AM" , "11:40 AM" , "11:50 AM" , "12:00 PM" , "12:10 PM" , "12:20 PM" , "12:30 PM" , "12:40 PM" , "12:50 PM" , "1:00 PM" , "1:10 PM" , "1:20 PM" , "1:30 PM" , "1:40 PM" , "1:50 PM" , "2:00 PM" , "2:10 PM" , "2:20 PM" , "2:30 PM" , "2:40 PM" , "2:50 PM" , "3:00 PM" , "3:10 PM" , "3:20 PM" , "3:30 PM" , "3:40 PM" , "3:50 PM" , "4:00 PM" , "4:08 PM" , "4:16 PM" , "4:24 PM" , "4:32 PM" , "4:40 PM" , "4:45 PM" , "4:50 PM" , "4:55 PM" , "5:00 PM" , "5:05 PM" , "5:10 PM" , "5:14 PM" , "5:18 PM" , "5:22 PM" , "5:26 PM" , "5:30 PM" , "5:34 PM" , "5:38 PM" , "5:42 PM" , "5:46 PM" , "5:50 PM" , "5:55 PM" , "6:00 PM" , "6:05 PM" , "6:10 PM" , "6:15 PM" , "6:20 PM" , "6:25 PM" , "6:30 PM" , "6:35 PM" , "6:40 PM" , "6:45 PM" , "6:50 PM" , "6:55 PM" , "7:00 PM" , "7:05 PM" , "7:10 PM" , "7:15 PM" , "7:20 PM" , "7:25 PM" , "7:30 PM" , "7:35 PM" , "7:40 PM" , "7:45 PM" , "7:50 PM" , "7:55 PM" , "8:00 PM" , "8:06 PM" , "8:12 PM" , "8:18 PM" , "8:24 PM" , "8:30 PM" , "8:36 PM" , "8:42 PM" , "8:48 PM" , "8:54 PM" , "9:00 PM" , "9:08 PM" , "9:16 PM" , "9:24 PM" , "9:32 PM" , "9:40 PM" , "9:50 PM" , "10:00 PM" , "10:15 PM" , "10:30 PM" , "10:45 PM" , "11:00 PM"];
预期输出:例如:假设当前时间HH:MM为5:31 AM,则倒数计时器应从下一个定义的数组(即Futuretimes)中选择与当前时间HH:MM相比较的下一个最高HH:MM时间,该时间恰好是最高时间,因此在此示例中,它应从阵列中选择5:45 AM,因为它是当前时间的下一个最大值(5:31 AM),然后应显示倒数计时器,并且当当前的倒数计时器结束时,它将从阵列中获取下一个最大值与新的当前时间等相比]
我试图以秒为单位获取当前时间,但是卡住了如何在这些arrayoftime之间进行循环并选择最高的时间来启动timercountdown:
const currentMinute = new Date().getMinutes();
const currenthour = new Date().getHours();
const totalseconds=3600*currenthour +60*currentMinute;//current time in seconds
// now stuck how to do further
为了简单起见,缩短了数组,并对小时进行了硬编码
var futuretimes = ["5:00 AM" , "5:30 AM" , "5:45 AM" , "6:00 AM"];
var date = new Date();
date.setHours(5);
date.setMinutes(31);
var amPm = "AM";
if (date.getHours() >= 12) {
amPm= "PM";
} else {
amPm= "AM";
}
var hourString = `${date.getHours()}:${date.getMinutes()} ${amPm}`
while(!futuretimes.includes(hourString)){
date = new Date(date.getTime() + 1*60000);
hourString = `${date.getHours()}:${date.getMinutes()} ${amPm}`
}
console.log(hourString);
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="next_time"></p>
<p id="time_to_next_time"></p>
<script>
// Set the date we're counting down to
var futuretimes = ["5:00 AM" , "5:30 AM" , "5:45 AM" , "6:00 AM" , "6:15 AM" , "6:30 AM" , "6:40 AM" , "6:50 AM" , "7:00 AM" , "7:08 AM" , "7:16 AM" , "7:24 AM" , "7:35 AM" , "7:40 AM" , "7:45 AM" , "7:50 AM" , "7:55 AM" , "8:00 AM" , "8:05 AM" , "8:10 AM" , "8:15 AM" , "8:20 AM" , "8:25 AM" , "8:30 AM" , "8:34 AM" , "8:38 AM" , "8:42 AM" , "8:46 AM" , "8:50 AM" , "8:54 AM" , "8:58 AM" , "9:02 AM" , "9:06 AM" , "9:10 AM" , "9:15 AM" , "9:20 AM" , "9:25 AM" , "9:30 AM" , "9:35 AM" , "9:40 AM" , "9:45 AM" , "9:50 AM" , "9:55 AM" , "10:00 AM" , "10:06 AM" , "10:12 AM" , "10:18 AM" , "10:26 AM" , "10:34 AM" , "10:40 AM" , "10:50 AM" , "11:00 AM" , "11:10 AM" , "11:20 AM" , "11:30 AM" , "11:40 AM" , "11:50 AM" , "12:00 PM" , "12:10 PM" , "12:20 PM" , "12:30 PM" , "12:40 PM" , "12:50 PM" , "1:00 PM" , "1:10 PM" , "1:20 PM" , "1:30 PM" , "1:40 PM" , "1:50 PM" , "2:00 PM" , "2:10 PM" , "2:20 PM" , "2:30 PM" , "2:40 PM" , "2:50 PM" , "3:00 PM" , "3:10 PM" , "3:20 PM" , "3:30 PM" , "3:40 PM" , "3:50 PM" , "4:00 PM" , "4:08 PM" , "4:16 PM" , "4:24 PM" , "4:32 PM" , "4:40 PM" , "4:45 PM" , "4:50 PM" , "4:55 PM" , "5:00 PM" , "5:05 PM" , "5:10 PM" , "5:14 PM" , "5:18 PM" , "5:22 PM" , "5:26 PM" , "5:30 PM" , "5:34 PM" , "5:38 PM" , "5:42 PM" , "5:46 PM" , "5:50 PM" , "5:55 PM" , "6:00 PM" , "6:05 PM" , "6:10 PM" , "6:15 PM" , "6:20 PM" , "6:25 PM" , "6:30 PM" , "6:35 PM" , "6:40 PM" , "6:45 PM" , "6:50 PM" , "6:55 PM" , "7:00 PM" , "7:05 PM" , "7:10 PM" , "7:15 PM" , "7:20 PM" , "7:25 PM" , "7:30 PM" , "7:35 PM" , "7:40 PM" , "7:45 PM" , "7:50 PM" , "7:55 PM" , "8:00 PM" , "8:06 PM" , "8:12 PM" , "8:18 PM" , "8:24 PM" , "8:30 PM" , "8:36 PM" , "8:42 PM" , "8:48 PM" , "8:54 PM" , "9:00 PM" , "9:08 PM" , "9:16 PM" , "9:24 PM" , "9:32 PM" , "9:40 PM" , "9:50 PM" , "10:00 PM" , "10:15 PM" , "10:30 PM" , "10:45 PM" , "11:00 PM"];
converted_time_array = []
for (var i = 0; i<futuretimes.length; i++) {
converted_time_array.push(converttime(futuretimes[i]))
}
function converttime(time){
var amorpm = time.substring(time.length-2,time.length)
var split = time.split(':')
var hh = parseInt(split[0])
var mm = parseInt(split[1].substring(0,2))
time_in_s = hh*3600+mm*60
if(amorpm=="PM" & hh!=12){
time_in_s += 12*3600
}
return time_in_s
}
var index = 0
var select_time_in_array = converted_time_array[index]
for (var i = 0; i<converted_time_array.length; i++) {
select_time_in_array = converted_time_array[i]
var now = new Date()
currenttime = 3600*now.getHours()+60*now.getMinutes()+now.getSeconds()
var dist = select_time_in_array - currenttime;
console.log(dist)
console.log(futuretimes[i])
if(dist>0){
index = i
select_time_in_array = converted_time_array[index]
break
}
}
var x = setInterval(function() {
var now = new Date()
currenttime = 3600*now.getHours()+60*now.getMinutes()+now.getSeconds()
var distance = select_time_in_array - currenttime;
if(distance<0){
index++
select_time_in_array = converted_time_array[index]
}
var hours = Math.floor((distance % (60 * 60 * 24)) / (60 * 60));
var minutes = Math.floor((distance % (60 * 60)) / (60));
var seconds = Math.floor((distance % 60));
document.getElementById("time_to_next_time").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
var hours = Math.floor((select_time_in_array % (60 * 60 * 24)) / (60 * 60));
var minutes = Math.floor((select_time_in_array % (60 * 60)) / (60));
var seconds = Math.floor((select_time_in_array % 60));
document.getElementById("next_time").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
</script>
</body>
这里是角度的一种实现。
Stackblitz:https://stackblitz.com/edit/angular-sbosff
<small>Now</small>
<p>{{ now$ | async | date:'h:mm:ss a' }}</p>
<hr>
<small>Next Time</small>
<ng-container>
<p>{{ (nextTime$ | async)?.time }}</p>
</ng-container>
<hr>
<ng-container>
<small>Countdown to Next</small>
<p>{{ timeToNext$ | async }}</p>
</ng-container>
<hr>
<small>All Times</small>
<ng-container *ngFor="let timeOption of futuretimes">
<p>{{ timeOption }}</p>
</ng-container>
import { Component } from '@angular/core';
import { Observable, interval, combineLatest } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
interface StringTimeWithDate {
time: string;
asDate: Date;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
now$: Observable<Date>;
nextTime$: Observable<StringTimeWithDate>;
timeToNext$: Observable<string>;
futuretimes = [
'5:00 AM',
'5:30 AM',
'5:45 AM',
'6:00 AM',
'6:15 AM',
'6:30 AM',
'6:40 AM',
'6:50 AM',
'7:00 AM',
'7:08 AM',
'7:16 AM',
'7:24 AM',
'7:35 AM',
'7:40 AM',
'7:45 AM',
'7:50 AM',
'7:55 AM',
'8:00 AM',
'8:05 AM',
'8:10 AM',
'8:15 AM',
'8:20 AM',
'8:25 AM',
'8:30 AM',
'8:34 AM',
'8:38 AM',
'8:42 AM',
'8:46 AM',
'8:50 AM',
'8:54 AM',
'8:58 AM',
'9:02 AM',
'9:06 AM',
'9:10 AM',
'9:15 AM',
'9:20 AM',
'9:25 AM',
'9:30 AM',
'9:35 AM',
'9:40 AM',
'9:45 AM',
'9:50 AM',
'9:55 AM',
'10:00 AM',
'10:06 AM',
'10:12 AM',
'10:18 AM',
'10:26 AM',
'10:34 AM',
'10:40 AM',
'10:50 AM',
'11:00 AM',
'11:10 AM',
'11:20 AM',
'11:30 AM',
'11:40 AM',
'11:50 AM',
'12:00 PM',
'12:10 PM',
'12:20 PM',
'12:30 PM',
'12:40 PM',
'12:50 PM',
'1:00 PM',
'1:10 PM',
'1:20 PM',
'1:30 PM',
'1:40 PM',
'1:50 PM',
'2:00 PM',
'2:10 PM',
'2:20 PM',
'2:30 PM',
'2:40 PM',
'2:50 PM',
'3:00 PM',
'3:10 PM',
'3:20 PM',
'3:30 PM',
'3:40 PM',
'3:50 PM',
'4:00 PM',
'4:08 PM',
'4:16 PM',
'4:21 PM',
'4:32 PM',
'4:40 PM',
'4:45 PM',
'4:50 PM',
'4:55 PM',
'5:00 PM',
'5:05 PM',
'5:10 PM',
'5:14 PM',
'5:18 PM',
'5:22 PM',
'5:26 PM',
'5:30 PM',
'5:34 PM',
'5:38 PM',
'5:42 PM',
'5:46 PM',
'5:50 PM',
'5:55 PM',
'6:00 PM',
'6:05 PM',
'6:10 PM',
'6:15 PM',
'6:20 PM',
'6:25 PM',
'6:30 PM',
'6:35 PM',
'6:40 PM',
'6:45 PM',
'6:50 PM',
'6:55 PM',
'7:00 PM',
'7:05 PM',
'7:10 PM',
'7:15 PM',
'7:20 PM',
'7:25 PM',
'7:30 PM',
'7:35 PM',
'7:40 PM',
'7:45 PM',
'7:50 PM',
'7:55 PM',
'8:00 PM',
'8:06 PM',
'8:12 PM',
'8:18 PM',
'8:24 PM',
'8:30 PM',
'8:36 PM',
'8:42 PM',
'8:48 PM',
'8:54 PM',
'9:00 PM',
'9:08 PM',
'9:16 PM',
'9:24 PM',
'9:32 PM',
'9:40 PM',
'9:50 PM',
'10:00 PM',
'10:15 PM',
'10:30 PM',
'10:45 PM',
'11:00 PM'
];
futureTimesAsDate: StringTimeWithDate[];
constructor() {
// map time to date and ensure sort ascending
this.futureTimesAsDate = this.futuretimes
.map(time => ({ time, asDate: this.timeStringToDate(time) }))
.sort((a, b) => (a.asDate > b.asDate ? 1 : -1));
this.now$ = interval(1000).pipe(
startWith(null),
map(() => new Date())
);
this.nextTime$ = this.now$.pipe(
map((now: Date) => this.futureTimesAsDate.find(timeDate => timeDate.asDate > now))
);
this.timeToNext$ = combineLatest(this.now$, this.nextTime$, (now, nextTime) => {
if (!now || !nextTime) {
return null;
}
const diff = nextTime.asDate.valueOf() - now.valueOf();
const millisPerSec = 1000;
const millisPerMin = millisPerSec * 60;
const min = Math.floor(diff / millisPerMin);
const msLeftover = Math.floor(diff % millisPerMin);
const secLeftover = Math.floor(msLeftover / millisPerSec);
const formattedMin = min < 10 ? `0${min}` : min;
const formattedSec = secLeftover < 10 ? `0${secLeftover}` : secLeftover;
const minMsToNext = `${formattedMin}:${formattedSec}`;
return minMsToNext;
});
}
ngOnInit() {}
private timeStringToDate = dateString => {
const [time, period] = dateString.split(' ');
const [hour, minutes] = time.split(':').map(numString => Number(numString));
const hourOutOf24 = period.toLowerCase() === 'pm' && hour !== 12 ? hour + 12 : hour;
const dateForDateString = new Date();
dateForDateString.setHours(hourOutOf24, minutes, 0, 0);
return dateForDateString;
}
}