按小时\分钟而非秒计算倒计时

时间:2018-04-23 07:53:33

标签: javascript time countdown

我试图使用此倒计时,但它会计算每秒的时间。 我想反击计算时间几分钟甚至几小时,而不是每一秒,因为我只显示日期和时间。

我已经尝试删除var秒或分钟,但是检查元素每1秒显示一次purpl眨眼,这意味着它仍然按秒计算时间。

<!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="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("April 24, 2018 15:37:25").getTime();

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

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an 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 ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>

1 个答案:

答案 0 :(得分:3)

更改

private static final NumberFormat currency = NumberFormat.getCurrencyInstance();
private static final BigDecimal HUNDRED = BigDecimal.valueOf(100);

@FXML
private TextField amountTextField;
@FXML
private Label tipPercentageLabel;
@FXML
private Slider tipPercentageSlider;
@FXML
private TextField tipTextField;
@FXML
private TextField totalTextField;

private void update() {
    BigDecimal amount;
    try {
        amount = new BigDecimal(amountTextField.getText());
    } catch (NumberFormatException ex) {
        tipTextField.setText("Invalid Input");
        totalTextField.setText("Invalid Input");
        return;
    }
    BigDecimal tipFactor = BigDecimal.valueOf(tipPercentageSlider.getValue()).divide(HUNDRED, 2, RoundingMode.HALF_UP);
    BigDecimal tip = amount.multiply(tipFactor);
    BigDecimal total = amount.add(tip);
    tipTextField.setText(currency.format(tip));
    totalTextField.setText(currency.format(total));
}

@FXML
private void initialize() {
    // assuming slider value = 100 -> 100%
    tipPercentageLabel.textProperty().bind(tipPercentageSlider.valueProperty().asString("%.0f %%"));

    currency.setRoundingMode(RoundingMode.HALF_UP);
    tipPercentageSlider.valueProperty().addListener(o -> update());
    amountTextField.textProperty().addListener(o -> update());
}

// Update the count down every 1 second
var x = setInterval(function() {
...
}, 1000);

// Update the count down every 1 minute
var x = setInterval(function() {
...
}, 1000*60);

修改

这将每分钟/小时更新您的计时器。现在,开始倒计时并更新每分钟/小时:

// Update the count down every 1 hour
var x = setInterval(function() {
...
}, 1000*60*60);

或只是

calculateCountdown();
// Update the count down every 1 minute
var x = setInterval(function() {
  calculateDountdown();
}, 1000*60);

,其中

calculateCountdown();
setInterval(calculateCountdown, 1000*60);

选中此answer,了解如何将基于function calculateCountdown() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an 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 "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } } 的解决方案重构为setInterval