Front-end obtains specified date perpetual calendar

Introduce the js content below, call lunar(Date object) to obtain an object containing the calendar information. The js file is sourced from 360 Calendar.

Complete file download: lunar.zip

Effect Image#

Effect Image.png

Call Example#

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lunar.js"></script>
  </head>
  <body>
    <p id="out"></p>
    <script>
      var lunar = lunar(new Date());
      console.log("lunar: ", lunar);
      document.getElementById(
        "out"
      ).innerHTML = `${lunar.oDate.getFullYear()}年${(
        "0" +
        (lunar.oDate.getMonth() + 1)
      ).slice(-2)}月${("0" + lunar.oDate.getDate()).slice(-2)}日 星期${
        lunar.cnDay
      }<br/>农历${lunar.lMonth}月${lunar.lDate}<br/>${lunar.gzYear}年${
        lunar.gzMonth
      }月${lunar.gzDate}日<br/>[${lunar.animal}年]`;
    </script>
  </body>
</html>

Reference#

Calendar_360 Navigation