【问题标题】:Time remaining till next birthday javascript距离下一个生日的剩余时间javascript
【发布时间】:2020-02-13 00:14:54
【问题描述】:

我正在尝试构建一个应用程序,用户可以从日历中选择他们的生日,该应用程序会以天、小时、分钟和秒的形式向用户显示他们的年龄和距离下一个生日的剩余时间。我正在使用反应日历和时刻。不知何故,我得到了用户年龄,但我不知道如何获得剩余时间。这是我的代码:

import React, { Component } from "react";
import Calendar from "react-calendar";
import moment from "moment";

export default class App extends Component {
  state = {
    date: new Date(),
    age: null,
    timeRemaining: {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    }
  };

  onChange = date => this.setState({ date });

  handleClick = () => {
    const birthday = moment(this.state.date).toDate();
    const now = new Date();
    const currentYear = now.getFullYear();
    const birthYear = birthday.getFullYear();
    let age = currentYear - birthYear;
    if (now < new Date(birthday.setFullYear(currentYear))) {
      age = age - 1;
    }

    this.setState({ age });
  };
  render() {
    console.log(this.state.date);
    console.log(this.state.age);

    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          onClickDay={this.handleClick}
        />

        <div>{this.state.age}</div>
      </div>
    );
  }
}

【问题讨论】:

  • 如果某人的生日是 2 月 29 日怎么办?您的代码在今年 3 月 1 日/之后将如何工作?

标签: javascript reactjs


【解决方案1】:

我不知道这是否是您要查找的内容,但通过此代码,我可以知道距离下一个生日还有多少个月和几天

const birthday = new Date(1992, 5, 22);
const currentDate = new Date(Date.now());

const birthdayMonth = birthday.getMonth();
const birthdayDay = birthday.getDate();

const nextBirthday = new Date(currentDate.getFullYear(), birthdayMonth, birthdayDay).getTime() < currentDate.getTime()
? new Date(currentDate.getFullYear() + 1, birthdayMonth, birthdayDay)
: new Date(currentDate.getFullYear(), birthdayMonth, birthdayDay);

let remainingTime = nextBirthday.getTime() - currentDate.getTime();

const remainingMonths = Math.floor((remainingTime / 1000) / (60 * 60 * 24 * 30));

remainingTime -= remainingMonths * (60 * 60 * 24 * 30 * 1000);

const remainingDays = Math.floor((remainingTime / 1000) / (60 * 60 * 24));

console.log(`Remaining ${remainingMonths} months and ${remainingDays} days until your birthday`);

【讨论】:

    【解决方案2】:

    由于你已经在使用moment.js,你可以使用moment.js的比较方法。

    // your specific birthday you want to compare
    const myBirthday: Moment = moment("2020/01/03");
    // date of today
    const today: Moment = moment();
    // if birthday is in past, add one year
    if (today > myBirthday) {
      myBirthday.add(1, "year");
    }
    // calculate duration of difference between those two days
    const duration: Duration = moment.duration(myBirthday.diff(today));
    // output the duration as you wish
    console.log(duration.get("month"));
    console.log(duration.get("days"));
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-06-21
      • 2018-02-03
      • 2012-08-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多