угловой - как сделать обратный отсчет с текущим временем - PullRequest
Новая
       11

угловой - как сделать обратный отсчет с текущим временем

1 голос
/ 07 ноября 2019

У меня есть массив времен (в будущем), поэтому мне нужно показать таймер обратного отсчета в формате MM: SS в порядке убывания, сравнивая с текущим временем (ЧЧ: ММ). поэтому, когда таймер завершит работу, он перейдет к следующему наибольшему таймеру из нового значения ЧЧ: ММ

Как это сделать? 

    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"];

Ожидаемый результат: Например: предположим, что если текущее время ЧЧ: ММ составляет 5:31 утра, то таймер обратного отсчета должен выбрать следующее наибольшее время ЧЧ: ММ по сравнению с текущим временем ЧЧ: ММ из определенного выше массива (то есть в будущем), которое является просто самым высоким временем,поэтому в этом примере он должен выбрать 5:45 AM из массива, потому что это следующее наибольшее значение из текущего времени (5:31 AM), а затем должен быть показан таймер обратного отсчета, и как только текущий таймер обратного отсчета завершится, он примет следующий самый высокий из массива какпо сравнению с новым текущим временем и т. д.

Я пытался получить текущее время в секундах, но застрял, как сделать цикл между этими массивами времени и выбрать самый высокий для запуска отсчета таймера: 

    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

Ответы [ 3 ]

0 голосов
/ 08 ноября 2019 
<!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>
0 голосов
/ 08 ноября 2019

Вот одна реализация в угловом формате с использованием наблюдаемых.

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.ceil(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;
  }
}
0 голосов
/ 07 ноября 2019

Массив сокращен, а час жестко закодирован для простоты 

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);
...