Embedded Files
Code Html :
Code Html :
<!DOCTYPE html>
<html>
<head>
<title>เครื่องคำนวณวันเกษียณอายุราชการ</title>
</head>
<body>
<marquee><h1>เครื่องคำนวณวันเกษียณอายุราชการ</h1></marquee>
<p>.</p>
<!-- เครื่องคำนวณวันเกษียณอายุราชการ - เวอร์ชั่น 2.0 -->
<style>
.retirement-calculator {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.retirement-calculator h2 {
text-align: center;
color: #2c3e50;
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
}
.input-group {
margin-bottom: 20px;
}
.input-group > label {
display: block;
margin-bottom: 10px;
color: #34495e;
font-weight: bold;
}
.date-inputs {
display: flex;
gap: 10px;
margin-bottom: 5px;
}
.date-input-group {
flex: 1;
}
.date-input-group label {
display: block;
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
select, input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
background: white;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.error {
color: #e74c3c;
font-size: 14px;
margin-top: 5px;
display: none;
}
.calculate-btn {
background: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
font-weight: bold;
transition: background-color 0.2s;
}
.calculate-btn:hover {
background: #2980b9;
}
.result > div {
padding: 15px;
border-radius: 4px;
margin-top: 10px;
}
.retirement-info {
background: #fff;
border-left: 4px solid #3498db;
}
.service-info {
background: #e8f6ff;
border-left: 4px solid #2ecc71;
}
.remaining-service-info {
background: #fff3e6;
border-left: 4px solid #f39c12;
}
.special-note {
background: #ffeaa7;
border-left: 4px solid #fdcb6e;
padding: 10px;
margin-top: 10px;
border-radius: 4px;
font-size: 14px;
display: none;
}
.info-label {
font-weight: bold;
color: #2c3e50;
margin-bottom: 8px;
}
.result p {
margin: 8px 0;
color: #2c3e50;
font-size: 15px;
}
</style>
<div class="retirement-calculator">
<h2>เครื่องคำนวณวันเกษียณอายุราชการ</h2>
<!-- วันเดือนปีเกิด -->
<div class="input-group">
<label>วันเดือนปีเกิด</label>
<div class="date-inputs">
<div class="date-input-group">
<label>วัน</label>
<select id="birth-day">
<option value="">เลือกวัน</option>
</select>
</div>
<div class="date-input-group">
<label>เดือน</label>
<select id="birth-month">
<option value="">เลือกเดือน</option>
</select>
</div>
<div class="date-input-group">
<label>พ.ศ.</label>
<input type="number" id="birth-year" placeholder="ปี พ.ศ." min="2400" max="2600">
</div>
</div>
<div id="error-message-birth" class="error">กรุณากรอกข้อมูลวันเดือนปีเกิดให้ครบถ้วน</div>
</div>
<!-- วันที่บรรจุ -->
<div class="input-group">
<label>วันที่บรรจุเข้ารับราชการ</label>
<div class="date-inputs">
<div class="date-input-group">
<label>วัน</label>
<select id="service-day">
<option value="">เลือกวัน</option>
</select>
</div>
<div class="date-input-group">
<label>เดือน</label>
<select id="service-month">
<option value="">เลือกเดือน</option>
</select>
</div>
<div class="date-input-group">
<label>พ.ศ.</label>
<input type="number" id="service-year" placeholder="ปี พ.ศ." min="2400" max="2600">
</div>
</div>
<div id="error-message-service" class="error">กรุณากรอกข้อมูลวันที่บรรจุให้ครบถ้วน</div>
</div>
<button onclick="calculateRetirement()" class="calculate-btn">คำนวณวันเกษียณ</button>
<div id="result" style="display: none;">
<div class="retirement-info">
<div class="info-label">ข้อมูลการเกษียณ</div>
<p id="retirement-date"></p>
<p id="time-left"></p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<center><p>Advertisement</p>
<!-- Geniee Wrapper Body Tag 1579620_prakaspon.com__banner_300*250_(responsive) -->
<div data-cptid="1579620_prakaspon.com__banner_300*250_(responsive)" style="display: block;">
<script>
window.gnshbrequest.cmd.push(function() {
window.gnshbrequest.applyPassback("1579620_prakaspon.com__banner_300*250_(responsive)", "[data-cptid='1579620_prakaspon.com__banner_300*250_(responsive)']");
});
</script>
</div>
<!-- /Geniee Wrapper Body Tag 1579620_prakaspon.com__banner_300*250_(responsive) --></center></div>
<div id="special-note" class="special-note"></div>
</div>
<div class="service-info">
<div class="info-label">ข้อมูลอายุราชการ</div>
<p id="service-time-total"></p>
<p id="service-time-current"></p>
</div>
<div class="remaining-service-info">
<div class="info-label">อายุราชการคงเหลือ</div>
<p id="remaining-service-time"></p>
</div>
</div>
</div>
<script>
const thaiMonths = [
"มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน",
"กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"
];
function populateDays(selectElement) {
for (let i = 1; i <= 31; i++) {
const option = document.createElement('option');
option.value = i;
option.textContent = i;
selectElement.appendChild(option);
}
}
function populateMonths(selectElement) {
thaiMonths.forEach((month, index) => {
const option = document.createElement('option');
option.value = index + 1;
option.textContent = month;
selectElement.appendChild(option);
});
}
// เพิ่มตัวเลือกให้กับทุก dropdown เมื่อโหลดหน้า
window.addEventListener('load', function() {
populateDays(document.getElementById('birth-day'));
populateDays(document.getElementById('service-day'));
populateMonths(document.getElementById('birth-month'));
populateMonths(document.getElementById('service-month'));
});
function calculateRetirement() {
// รับค่าจาก input
const birthDay = parseInt(document.getElementById('birth-day').value);
const birthMonth = parseInt(document.getElementById('birth-month').value);
const birthYear = document.getElementById('birth-year').value;
const serviceDay = document.getElementById('service-day').value;
const serviceMonth = document.getElementById('service-month').value;
const serviceYear = document.getElementById('service-year').value;
// ตรวจสอบการกรอกข้อมูล
const errorMessageBirth = document.getElementById('error-message-birth');
const errorMessageService = document.getElementById('error-message-service');
const result = document.getElementById('result');
const specialNote = document.getElementById('special-note');
if (!birthDay || !birthMonth || !birthYear) {
errorMessageBirth.style.display = 'block';
result.style.display = 'none';
return;
}
if (!serviceDay || !serviceMonth || !serviceYear) {
errorMessageService.style.display = 'block';
result.style.display = 'none';
return;
}
errorMessageBirth.style.display = 'none';
errorMessageService.style.display = 'none';
// แปลงเป็น Date object
const birthDate = new Date(birthYear - 543, birthMonth - 1, birthDay);
const serviceDate = new Date(serviceYear - 543, serviceMonth - 1, serviceDay);
const today = new Date();
// ตรวจสอบเดือนและวันเกิด
let retirementYear = birthDate.getFullYear() + 60;
let extraYear = 0;
let retirementNote = "";
// เงื่อนไขใหม่: เกิด 2 ต.ค. - 31 ธ.ค. ให้เพิ่มอีก 1 ปี
if ((birthMonth === 10 && birthDay >= 2) || (birthMonth > 10)) {
retirementYear += 1;
extraYear = 1;
if (birthMonth === 10) {
retirementNote = `หมายเหตุ: เนื่องจากเกิดวันที่ ${birthDay} ตุลาคม
จึงเกษียณในปีถัดไป และได้รับการนับอายุราชการเพิ่ม 1 ปี`;
} else {
retirementNote = `หมายเหตุ: เนื่องจากเกิดเดือน${thaiMonths[birthMonth-1]}
จึงเกษียณในปีถัดไป และได้รับการนับอายุราชการเพิ่ม 1 ปี`;
}
}
const retirementDate = new Date(retirementYear, 8, 30); // 30 กันยายน
// คำนวณเวลาที่เหลือถึงวันเกษียณ
const timeLeft = retirementDate - today;
const yearsLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24 * 365.25));
const monthsLeft = Math.floor((timeLeft % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24 * 30.44));
const daysLeft = Math.floor((timeLeft % (1000 * 60 * 60 * 24 * 30.44)) / (1000 * 60 * 60 * 24));
// คำนวณอายุราชการทั้งหมดถึงวันเกษียณ
const totalServiceTime = retirementDate - serviceDate;
const totalYears = Math.floor(totalServiceTime / (1000 * 60 * 60 * 24 * 365.25));
const totalMonths = Math.floor((totalServiceTime % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24 * 30.44));
const totalDays = Math.floor((totalServiceTime % (1000 * 60 * 60 * 24 * 30.44)) / (1000 * 60 * 60 * 24));
// คำนวณอายุราชการปัจจุบัน
const currentServiceTime = today - serviceDate;
const currentYears = Math.floor(currentServiceTime / (1000 * 60 * 60 * 24 * 365.25));
const currentMonths = Math.floor((currentServiceTime % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24 * 30.44));
const currentDays = Math.floor((currentServiceTime % (1000 * 60 * 60 * 24 * 30.44)) / (1000 * 60 * 60 * 24));
// แสดงผลลัพธ์
document.getElementById('retirement-date').innerHTML =
`วันเกษียณอายุราชการ: 30 กันยายน ${retirementYear + 543}`;
document.getElementById('time-left').innerHTML =
`เหลือเวลาถึงเกษียณอีก: ${yearsLeft} ปี ${monthsLeft} เดือน ${daysLeft} วัน`;
document.getElementById('service-time-total').innerHTML =
`อายุราชการเมื่อเกษียณ: ${totalYears} ปี ${totalMonths} เดือน ${totalDays} วัน`;
document.getElementById('service-time-current').innerHTML =
`อายุราชการปัจจุบัน: ${currentYears} ปี ${currentMonths} เดือน ${currentDays} วัน`;
document.getElementById('remaining-service-time').innerHTML =
`ระยะเวลารับราชการที่เหลือ: ${yearsLeft} ปี ${monthsLeft} เดือน ${daysLeft} วัน`;
// แสดงหมายเหตุกรณีเกิด 2 ต.ค. - 31 ธ.ค.
if (extraYear === 1) {
specialNote.style.display = 'block';
specialNote.innerHTML = retirementNote;
} else {
specialNote.style.display = 'none';
}
result.style.display = 'block';
}
</script>
</body>
</html>
Page updated
Report abuse