Question

我正在制作一个倒数计时器。呈现此页面时，useEffect中的setInterval会执行并更新时间。现在，我希望时间为0后应记录“时间已完成”。该怎么办？

https://doc.qt.io/

Answer 1

您需要添加条件渲染，如下所示：




import { Component, OnInit, AfterViewInit } from '@angular/core';
import 'anychart';
import { DataService } from 'src/app/services/data.service';

@Component({
  selector: 'app-timelines',
  templateUrl: './timelines.component.html',
  styleUrls: ['./timelines.component.css']
})
export class TimelinesComponent implements OnInit {
  
  public initTimeline: anychart.charts.Timeline;
  public globalTimeline: anychart.charts.Timeline;
  public globalRange: anychart.core.timeline.series.Range;
  
  constructor(private dataService: DataService) { }
  
  ngOnInit(): void {
    this.initChart();
  }
  
  initChart() {
    console.log(this.dataService.arcsMap);
    let arcsSet = anychart.data.set(this.dataService.arcsMap);
    
    this.globalTimeline = anychart.timeline();
    this.globalTimeline.axis().height(20);
    this.globalTimeline.axis().fill("#7030A0");
    this.globalTimeline.axis().stroke("#381850");
    this.globalTimeline.axis().ticks().stroke("#AB74D5");
    this.globalTimeline.axis().labels().fontFamily("Ubuntu");
    this.globalTimeline.axis().labels().fontWeight("bold");
    this.globalTimeline.axis().labels().fontColor("#E3D1F1");
    this.globalTimeline.axis().labels().format(function() {
      let realNumber = this.value;
      if (realNumber >= BASE_YEAR) {
        realNumber = this.value - BASE_YEAR;
      }
      return realNumber;
    })
    
    this.globalRange = this.globalTimeline.range(arcsSet);
    
    this.globalRangeSettings();
    
    this.globalTimeline.container("global-timeline");
    this.globalTimeline.draw();      
  }
  
  globalRangeSettings() {
    this.globalRange.height(30);
    this.globalRange.labels().format("{%name}");
    this.globalRange.labels().fontFamily("Ubuntu");
    this.globalRange.tooltip().titleFormat("{%name}");
    this.globalRange.tooltip().fontFamily("Ubuntu");
    this.globalRange.tooltip().format(function() {
      return `Début : Chapitre ${this.getData("startNb")}
              Fin : Chapitre ${this.getData("endNb")}`;
    })
    this.globalRange.color("#8E44BD");
  }
}

检查此可行的解决方案：https://codesandbox.io/s/elastic-wilson-xj4ow?file=/src/App.js:765-846

Answer 2

您可以使用以下代码完美地解决您的查询。

// Set the date we're counting down to
var countDownDate = new Date("Aug 30, 2020 15:27:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
        // console.log("done");
    }
}, 1000);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script src="demo.js"></script>
</body>

</html>

setInterval完成后如何执行功能？

2 个答案: