File manager - Edit - /home/webapp69.cm.in.th/u69319090016/portfolio/script.js
Back
/** * ========================================================================== * PORTFOLIO SCRIPT LOGIC * ควบคุมพฤติกรรม Interactive เช่น Hamburger menu, Scroll spy, Form verification * ========================================================================== */ document.addEventListener('DOMContentLoaded', () => { // === 1. การจัดการ Hamburger Menu (เมนูมือถือ) === const hamburgerToggle = document.getElementById('hamburger-toggle'); const navMenu = document.getElementById('nav-menu'); const navLinks = document.querySelectorAll('.nav-link'); // ฟังก์ชันเปิด/ปิดเมนู const toggleMenu = () => { hamburgerToggle.classList.toggle('active'); navMenu.classList.toggle('open'); // ล็อคการสกรอลหน้าเว็บเมื่อเมนูเปิดอยู่ if (navMenu.classList.contains('open')) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } }; hamburgerToggle.addEventListener('click', toggleMenu); // ปิดเมนูอัตโนมัติเมื่อมีการคลิกลิงก์นำทาง (สำหรับ Mobile/Tablet) navLinks.forEach(link => { link.addEventListener('click', () => { if (navMenu.classList.contains('open')) { toggleMenu(); } }); }); // === 2. เปลี่ยนสไตล์ Header เมื่อสกรอลหน้าเว็บลง (Header Shrink Effect) === const header = document.getElementById('header'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { header.classList.add('scroll-active'); } else { header.classList.remove('scroll-active'); } }); // === 3. Scroll Spy (ปรับลิงก์ในเมนูให้ Active ตามส่วนเนื้อหาปัจจุบัน) === const sections = document.querySelectorAll('section[id]'); const scrollActive = () => { const scrollY = window.pageYOffset; sections.forEach(current => { const sectionHeight = current.offsetHeight; const sectionTop = current.offsetTop - 100; // ระยะ offset ชดเชยสำหรับความสูงของ header const sectionId = current.getAttribute('id'); const targetNavLink = document.querySelector(`.nav-menu a[href*=${sectionId}]`); const targetStickyLink = document.querySelector(`.sticky-bottom-menu a[href*=${sectionId}]`); if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { if (targetNavLink) targetNavLink.classList.add('active'); if (targetStickyLink) targetStickyLink.classList.add('active'); } else { if (targetNavLink) targetNavLink.classList.remove('active'); if (targetStickyLink) targetStickyLink.classList.remove('active'); } }); }; window.addEventListener('scroll', scrollActive); // === 4. การตรวจสอบความถูกต้องของฟอร์มติดต่อ (Contact Form Validation) === const contactForm = document.getElementById('contact-form'); const formSuccess = document.getElementById('form-success'); // ฟังก์ชันสำหรับตรวจสอบรูปแบบอีเมลหรือเบอร์โทรศัพท์ const isValidContact = (contact) => { const emailRe = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; const phoneRe = /^[0-9]{9,10}$/; // เบอร์โทรศัพท์ 9-10 หลัก const cleanPhone = contact.replace(/[-]/g, ''); return emailRe.test(String(contact).toLowerCase()) || phoneRe.test(cleanPhone); }; // ตรวจสอบความถูกต้องของ Input รายบุคคล const validateField = (input, errorElementId, validationFn) => { const formGroup = input.parentElement; const value = input.value.trim(); let isValid = true; if (validationFn) { isValid = validationFn(value); } else { isValid = value !== ''; } if (!isValid) { formGroup.classList.add('invalid'); } else { formGroup.classList.remove('invalid'); } return isValid; }; contactForm.addEventListener('submit', (e) => { e.preventDefault(); // ป้องกันการ reload หน้าจอ const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const messageInput = document.getElementById('message'); // รันการตรวจสอบทีละฟิลด์ const isNameValid = validateField(nameInput, 'name-error'); const isEmailValid = validateField(emailInput, 'email-error', isValidContact); const isMessageValid = validateField(messageInput, 'message-error'); // หากผ่านเงื่อนไขครบถ้วน if (isNameValid && isEmailValid && isMessageValid) { // จำลองการส่งข้อมูลเสร็จสิ้น formSuccess.style.display = 'block'; contactForm.reset(); // เคลียร์ค่าข้อมูลในฟอร์ม // ซ่อนข้อความแจ้งเตือนสำเร็จหลังผ่านไป 5 วินาที setTimeout(() => { formSuccess.style.display = 'none'; }, 5000); } }); // ลบสถานะ Error ทันทีเมื่อผู้ใช้เริ่มพิมพ์แก้ไข const inputs = contactForm.querySelectorAll('input, textarea'); inputs.forEach(input => { input.addEventListener('input', () => { const formGroup = input.parentElement; if (formGroup.classList.contains('invalid')) { formGroup.classList.remove('invalid'); } }); }); // === 5. การสลับธีม (Dark / Light Mode Toggle) === const themeToggleBtn = document.getElementById('theme-toggle'); const savedTheme = localStorage.getItem('theme') || 'dark'; // ตั้งค่าธีมเริ่มต้นตามที่บันทึกไว้ document.documentElement.setAttribute('data-theme', savedTheme); themeToggleBtn.addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-theme'); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); }); });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.37 |
proxy
|
phpinfo
|
Settings