File manager - Edit - /home/kridsana/webapp.cm.in.th/663012801/u66301280009/P002/Untitled-1.php
Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <title>คะแนนและเกรด</title> <style> body { font-family: 'Roboto', sans-serif; text-align: center; margin: 0; padding: 0; background: url('') ; background-size: cover; font-size: 20px; color: #00c2ff; } h2 { font-size: 48px; font-family: 'Lobster', cursive; text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.7); } .container { display: flex; justify-content: center; align-items: center; height: 100vh; flex-wrap: wrap; gap: 50px; } .form-section { background: rgba(0, 0, 0, 0.6); /* สีดำทึบเพื่อทำให้ข้อความเด่น */ padding: 30px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); animation: fadeIn 2s ease-in-out; width: 400px; border: 3px solid #00c2FF; } .form-section { background: linear-gradient(135deg, #00CEFF, #4d4d4d); /* สีเข้ม */ } .form-section label { font-size: 24px; margin-top: 15px; display: block; text-align: left; color: #FFFFFF; } .form-section input[type="text"] { width: 80%; padding: 10px; margin: 10px 0; font-size: 22px; border-radius: 8px; border: 2px solid #FFFFFF; background-color: #fff; display: block; margin-left: auto; margin-right: auto; } .form-section input[type="submit"] { padding: 15px 30px; background-color: #00C2ff; color: white; border: none; cursor: pointer; border-radius: 5px; font-size: 24px; transition: transform 0.2s ease-in-out; } .form-section input[type="submit"]:hover { background-color: #e6b800; transform: scale(1.1); } .error { color: #FFFFFF; font-size: 20px; } .result { margin-top: 30px; font-size: 28px; font-weight: bold; color: #FFFFFF; } small { font-size: 18px; color: #FFFFFF; display: block; margin-top: 5px; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } </style> <script> function validateScores() { const quiz = document.querySelector('[name="quiz_score"]').value; const test = document.querySelector('[name="test_score"]').value; const project = document.querySelector('[name="project_score"]').value; const final = document.querySelector('[name="final_score"]').value; const quizScore = parseInt(quiz); const testScore = parseInt(test); const projectScore = parseInt(project); const finalScore = parseInt(final); if (isNaN(quizScore) || isNaN(testScore) || isNaN(projectScore) || isNaN(finalScore)) { alert("กรุณาใส่คะแนนเป็นตัวเลขเท่านั้น"); return false; } if (quizScore < 0 || quizScore > 20 || testScore < 0 || testScore > 30 || projectScore < 0 || projectScore > 20 || finalScore < 0 || finalScore > 30) { alert("คะแนนต้องอยู่ในช่วงที่กำหนด"); return false; } // เก็บค่าที่ถูกต้องลงในตัวแปร document.querySelector('[name="quiz_score"]').value = quizScore; document.querySelector('[name="test_score"]').value = testScore; document.querySelector('[name="project_score"]').value = projectScore; document.querySelector('[name="final_score"]').value = finalScore; return true; } </script> </head> <body> <h2>คะแนนรวมและเกรด</h2> <div class="container"> <div class="form-section"> <form method="post" onsubmit="return validateScores()"> <label>จิตพิสัย:</label> <input type="text" name="quiz_score" required> คะแนน (0 - 20)<br> <small>กรุณากรอกคะแนนที่อยู่ในช่วง 0 - 20</small> <label>แบบทดสอบ:</label> <input type="text" name="test_score" required> คะแนน (0 - 30)<br> <small>กรุณากรอกคะแนนที่อยู่ในช่วง 0 - 30</small> <label>งาน:</label> <input type="text" name="project_score" required> คะแนน (0 - 20)<br> <small>กรุณากรอกคะแนนที่อยู่ในช่วง 0 - 20</small> <label>สอบปลายภาค:</label> <input type="text" name="final_score" required> คะแนน (0 - 30)<br> <small>กรุณากรอกคะแนนที่อยู่ในช่วง 0 - 30</small> <br><br> <input type="submit" name="calculate" value="ประมวลผล"> </form> </div> </div> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 7.27 |
proxy
|
phpinfo
|
Settings