Gestionnaire de fichiers - Editer - /home/kridsana/webapp.cm.in.th/673190902/u67319090017/P001/index.php
Arrière
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>P001</title> <style> @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* ตั้งค่าเริ่มต้น */ body { font-family: kanit, sans-serif; margin: 0; padding: 0; color: #173B45; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: white; } /* คอนเทนเนอร์หลัก */ .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 80%; max-width: 1200px; } /* ฟอร์มกรอกคะแนน */ .bg-form { width: 45%; background-color: #EEEEEE; border-radius: 30px; padding: 30px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: 20px; align-items: center; /* ทำให้ทุกอย่างในฟอร์มอยู่ตรงกลาง */ text-align: center; /* ทำให้ข้อความอยู่ตรงกลาง */ transition: all 0.3s ease; } h1 { font-size: 60px; color: #B43F3F; text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.6); margin-bottom: 20px; text-align: center; } a { text-align: center; } /* ฟอร์ม input */ .text-form { font-size: 50px; font-weight: 500; display: flex; flex-wrap: wrap; /* ทำให้ฟอร์มสามารถแยกออกเป็นหลายแถวได้ */ gap: 20px; justify-content: center; /* จัดให้ input อยู่ตรงกลาง */ align-items: center; } label { font-size: 20px; display: flex; flex-direction: column; width: 20%; /* ทำให้ label กว้าง 20% */ text-align: left; /* ทำให้ข้อความใน label ชิดซ้าย */ } input[type="number"] { padding: 10px; font-size: 18px; margin-top: 5px; border-radius: 10px; border: 1px solid #ccc; width: 80%; /* กำหนดความกว้างของ input ให้ 80% ของ label */ text-align: center; /* ทำให้ข้อความใน input อยู่กลาง */ } /* ปุ่ม submit และ reset */ .button { display: flex; justify-content: center; gap: 10px; } .submit, .reset { font-family: kanit, sans-serif; font-weight: 500; font-size: 20px; color: #F8EDED; background-color: #173B45; height: 40px; width: 120px; border-radius: 15px; border: none; transition: all 0.3s ease; } .submit:hover, .reset:hover { color: #173B45; background-color: #B43F3F; cursor: pointer; } /* ผลลัพธ์คะแนน */ .score-summary { width: 45%; font-size: 20px; margin-top: 30px; display: none; /* เริ่มต้นให้ซ่อน */ justify-content: center; align-items: center; background-color: #F4F4F4; border-radius: 10px; padding: 20px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); text-align: center; /* ทำให้ข้อความผลลัพธ์อยู่ตรงกลาง */ } table { width: 100%; border-collapse: collapse; margin-top: 20px; } table, th, td { border: 1px solid #ddd; } th, td { padding: 12px; text-align: center; } th { background-color: #173B45; color: #F8EDED; } tr:nth-child(even) { background-color: #f2f2f2; } /* การจัดตำแหน่งฟอร์มให้ตรงกลาง */ .form-center { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } </style> </head> <body> <div class="container"> <!-- ฟอร์มกรอกคะแนน --> <div class="bg-form form-center" id="formContainer"> <h1>คำนวณเกรด</h1> <form id="gradeForm" class="text-form"> <label for="score1"> <a>จิตพิสัย</a> <input class="score1" type="number" name="score1" min="0" max="20" required> <a>คะแนน</a> </label> <label for="score2"> <a>แบบทดสอบ</a> <input class="score2" type="number" name="score2" min="0" max="30" required> <a>คะแนน</a> </label> <label for="score3"> <a>งาน</a> <input class="score3" type="number" name="score3" min="0" max="20" required> <a>คะแนน</a> </label> <label for="score4"> <a>สอบ</a> <input class="score4" type="number" name="score4" min="0" max="30" required> <a>คะแนน</a> </label> <div class="button"> <input type="submit" value="SUBMIT" class="submit"> <input type="reset" value="RESET" class="reset"> </div> </form> </div> <!-- ผลลัพธ์คะแนน --> <div id="scoreResult" class="score-summary"> <h3>ผลลัพธ์การคำนวณคะแนน</h3> <table> <thead> <tr> <th>รายการ</th> <th>คะแนน</th> </tr> </thead> <tbody> <tr> <td>จิตพิสัย</td> <td id="score1Result"></td> </tr> <tr> <td>แบบทดสอบ</td> <td id="score2Result"></td> </tr> <tr> <td>งาน</td> <td id="score3Result"></td> </tr> <tr> <td>สอบ</td> <td id="score4Result"></td> </tr> <tr> <td>คะแนนรวม</td> <td id="totalScore"></td> </tr> <tr> <td>เกรด</td> <td id="grade"></td> </tr> </tbody> </table> </div> </div> <script> document.getElementById("gradeForm").addEventListener("submit", function(event) { event.preventDefault(); // ป้องกันการโหลดหน้าซ้ำเมื่อกด submit // ดึงค่าจากฟอร์ม var score1 = parseInt(document.querySelector(".score1").value) || 0; var score2 = parseInt(document.querySelector(".score2").value) || 0; var score3 = parseInt(document.querySelector(".score3").value) || 0; var score4 = parseInt(document.querySelector(".score4").value) || 0; // คำนวณคะแนนรวม var totalScore = score1 + score2 + score3 + score4; // คำนวณเกรด var grade = ''; if (totalScore >= 80) { grade = 'A'; } else if (totalScore >= 75) { grade = 'B+'; } else if (totalScore >= 70) { grade = 'B'; } else if (totalScore >= 65) { grade = 'C+'; } else if (totalScore >= 50) { grade = 'C'; } else if (totalScore >= 40) { grade = 'D'; } else { grade = 'F'; } // แสดงผลคะแนนในตาราง document.getElementById("score1Result").textContent = score1; document.getElementById("score2Result").textContent = score2; document.getElementById("score3Result").textContent = score3; document.getElementById("score4Result").textContent = score4; document.getElementById("totalScore").textContent = totalScore; document.getElementById("grade").textContent = grade; // แสดงผลลัพธ์ที่ซ่อนอยู่ var scoreResult = document.getElementById("scoreResult"); scoreResult.style.display = "block"; // แสดงผลลัพธ์ }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Génération de la page: 0.37 |
proxy
|
phpinfo
|
Réglages