HistoryC.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>万年历 - 全历法转换工具</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. margin: 0;
  11. padding: 0;
  12. text-align: center;
  13. background-color: #f4f4f9;
  14. color: #333;
  15. }
  16. header {
  17. background-color: #4CAF50;
  18. color: white;
  19. padding: 10px 0;
  20. }
  21. .container {
  22. max-width: 800px;
  23. margin: 20px auto;
  24. padding: 20px;
  25. background: white;
  26. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  27. border-radius: 8px;
  28. }
  29. input[type="date"] {
  30. padding: 10px;
  31. font-size: 16px;
  32. border: 1px solid #ccc;
  33. border-radius: 4px;
  34. margin: 10px 0;
  35. }
  36. .result {
  37. margin-top: 20px;
  38. }
  39. .result div {
  40. margin: 10px 0;
  41. }
  42. .history {
  43. margin-top: 30px;
  44. text-align: left;
  45. }
  46. .history h3 {
  47. color: #4CAF50;
  48. }
  49. footer {
  50. margin-top: 20px;
  51. padding: 10px;
  52. background-color: #4CAF50;
  53. color: white;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <header>
  59. <h1>万年历 - 全历法转换工具</h1>
  60. </header>
  61. <div class="container">
  62. <label for="date-input">选择日期:</label>
  63. <input type="date" id="date-input" />
  64. <div class="result">
  65. <h2>转换结果:</h2>
  66. <div id="gregorian-result">公历:--</div>
  67. <div id="chinese-result">农历:--</div>
  68. <div id="islamic-result">伊斯兰历:--</div>
  69. <div id="jewish-result">犹太历:--</div>
  70. <div id="maya-result">玛雅历:--</div>
  71. </div>
  72. </div>
  73. <footer>
  74. <p>© 2025 万年历工具 - 全历法转换</p>
  75. </footer>
  76. <script>
  77. document.getElementById("date-input").addEventListener("change", function() {
  78. const date = new Date(this.value);
  79. if (!isNaN(date)) {
  80. updateResults(date);
  81. } else {
  82. alert("请选择一个有效的日期!");
  83. }
  84. });
  85. function updateResults(date) {
  86. // 公历
  87. document.getElementById("gregorian-result").textContent = "公历:" + date.toDateString();
  88. // 农历
  89. const lunarDate = toChineseLunar(date);
  90. document.getElementById("chinese-result").textContent = "农历:" + lunarDate;
  91. // 伊斯兰历
  92. const islamicDate = toIslamicDate(date);
  93. document.getElementById("islamic-result").textContent = "伊斯兰历:" + islamicDate;
  94. // 犹太历
  95. const jewishDate = toJewishDate(date);
  96. document.getElementById("jewish-result").textContent = "犹太历:" + jewishDate;
  97. // 玛雅历
  98. const mayaDate = toMayaDate(date);
  99. document.getElementById("maya-result").textContent = "玛雅历:" + mayaDate;
  100. }
  101. function toChineseLunar(date) {
  102. // 农历计算逻辑(简单示例)
  103. const lunarMonths = ["正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "冬月", "腊月"];
  104. const lunarDays = ["初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十", "十一", "十二", "十三", "十四", "十五"];
  105. const year = date.getFullYear();
  106. const month = lunarMonths[(date.getMonth() % 12)];
  107. const day = lunarDays[(date.getDate() % 30)];
  108. return `${year}年 ${month} ${day}`;
  109. }
  110. function toIslamicDate(date) {
  111. // 伊斯兰历转换(简单示例)
  112. const jd = Math.floor((date - new Date("622-07-16")) / (24 * 60 * 60 * 1000)) + 1948439;
  113. const islamicYear = Math.floor((30 * jd + 10646) / 10631);
  114. const islamicMonth = Math.min(12, Math.ceil((jd - (29 + toJulian(islamicYear - 1, 1, 1))) / 29.5 + 1));
  115. const islamicDay = jd - toJulian(islamicYear, islamicMonth, 1) + 1;
  116. return `${islamicYear}年 ${islamicMonth}月 ${islamicDay}日`;
  117. }
  118. function toJewishDate(date) {
  119. // 犹太历(简单示例)
  120. return "5785年 尼散月";
  121. }
  122. function toMayaDate(date) {
  123. // 玛雅历(简单示例)
  124. return "13.0.0.0.0";
  125. }
  126. function toJulian(year, month, day) {
  127. return Math.floor(365.25 * year) + Math.floor(30.6001 * (month + 1)) + day + 1720994.5;
  128. }
  129. </script>
  130. </body>
  131. </html>