code All Full:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>หิมะตก</title>
<style>
body {
margin: 0;
background: linear-gradient(to bottom, #001f3f, #0074D9);
overflow: hidden;
height: 100vh;
}
.snowflake {
position: fixed;
top: -10px;
color: white;
font-size: 12px;
user-select: none;
pointer-events: none;
z-index: 9999;
}
</style>
</head>
<body>
<script>
const NUM_SNOWFLAKES = 100;
function random(min, max) {
return Math.random() * (max - min) + min;
}
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.textContent = '❄️';
snowflake.style.left = `${random(0, window.innerWidth)}px`;
snowflake.style.fontSize = `${random(10, 24)}px`;
snowflake.style.opacity = Math.random().toFixed(2);
snowflake.style.animation = `fall ${random(5, 12)}s linear`;
document.body.appendChild(snowflake);
const startX = parseFloat(snowflake.style.left);
const endX = startX + random(-100, 100);
const fallDuration = random(5, 12);
snowflake.animate([
{ transform: `translate(${startX}px, 0px)` },
{ transform: `translate(${endX}px, ${window.innerHeight}px)` }
], {
duration: fallDuration * 1000,
easing: 'linear',
});
setTimeout(() => {
snowflake.remove();
}, fallDuration * 1000);
}
setInterval(() => {
if (document.querySelectorAll('.snowflake').length < NUM_SNOWFLAKES) {
createSnowflake();
}
}, 200);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Progress Bar Loop</title>
<style>
body {
margin: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
font-family: sans-serif;
font-size: 2rem;
}
.progress-container {
width: 80%;
background-color: #444;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
height: 30px;
width: 0%;
background-color: limegreen;
text-align: center;
line-height: 30px;
color: black;
font-weight: bold;
transition: width 0.03s linear;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progress-bar">0%</div>
</div>
<script>
const bar = document.getElementById('progress-bar');
let percent = 0;
function startLoading() {
percent = 0;
const interval = setInterval(() => {
percent++;
bar.style.width = percent + '%';
bar.textContent = percent + '%';
if (percent >= 100) {
clearInterval(interval);
setTimeout(startLoading, 500);
}
}, 30);
}
startLoading();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ฟอร์มสวยๆ</title>
<style>
/* --- (ย่อ CSS เพื่อความกระชับ ถ้าต้องการฉบับเต็มแจ้งได้เลยนะครับ) --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: #000;
color: #fff;
overflow-x: hidden;
}
.navbar {
background: linear-gradient(to right, #4fc3f7, #0288d1);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-size: 1.7rem;
font-weight: bold;
color: white;
}
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
}
/* ===== Form Styling ===== */
.form-container {
max-width: 450px;
margin: 3rem auto;
background-color: #1c1c1c;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 0 20px #0288d1;
}
form input {
width: 100%;
padding: 0.6rem;
border: none;
margin-bottom: 1rem;
background-color: #2a2a2a;
color: white;
}
form button {
width: 100%;
padding: 0.8rem;
background: linear-gradient(to right, #03a9f4, #0288d1);
border: none;
color: white;
font-weight: bold;
border-radius: 6px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">MyForm</div>
<ul class="nav-links">
<li><a href="#">หน้าแรก</a></li>
<li><a href="#">เกี่ยวกับ</a></li>
<li><a href="#">ติดต่อ</a></li>
</ul>
</nav>
<main class="form-container">
<h2>ฟอร์มลงทะเบียน</h2>
<form id="registerForm">
<label for="name">ชื่อ:</label>
<input type="text" id="name" name="name" required>
<label for="email">อีเมล:</label>
<input type="email" id="email" name="email" required>
<label for="password">รหัสผ่าน:</label>
<input type="password" id="password" name="password" required>
<button type="submit">ส่งข้อมูล</button>
</form>
</main>
<script>
document.getElementById("registerForm").addEventListener("submit", function(e) {
e.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
alert(`ขอบคุณที่ลงทะเบียน, ${name}!\nเราจะติดต่อคุณที่ ${email}`);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ปฏิทินภาษาไทย</title>
<style>
body {
margin: 0;
font-family: 'Sarabun', sans-serif;
background-color: #e0f7fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calendar-container {
width: 80%;
background-color: #b3e5fc;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
border-radius: 10px;
padding: 20px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.calendar-header h2 {
margin: 0;
font-size: 1.5em;
color: #01579b;
}
.calendar-header button {
background-color: #0288d1;
color: white;
border: none;
padding: 8px 16px;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th, td {
width: 14.28%;
height: 80px;
vertical-align: top;
padding: 5px;
position: relative;
}
th {
background-color: #0288d1;
color: white;
}
td {
background-color: #ffffff;
}
td.sunday,
td.saturday {
background-color: #eeeeee;
}
td.empty {
background-color: #fff9c4;
}
.date-number {
position: absolute;
top: 5px;
right: 8px;
font-size: 0.9em;
color: #616161;
}
@media (max-width: 768px) {
.calendar-header h2 {
font-size: 1.2em;
}
td {
height: 60px;
}
.date-number {
font-size: 0.8em;
}
}
</style>
</head>
<body>
<div class="calendar-container">
<div class="calendar-header">
<button onclick="changeMonth(-1)">เดือนก่อนหน้า</button>
<h2 id="monthYear"></h2>
<button onclick="changeMonth(1)">เดือนถัดไป</button>
</div>
<table id="calendar">
<thead>
<tr>
<th>อาทิตย์</th>
<th>จันทร์</th>
<th>อังคาร</th>
<th>พุธ</th>
<th>พฤหัสบดี</th>
<th>ศุกร์</th>
<th>เสาร์</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script>
const monthNamesThai = [
"มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน",
"กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"
];
let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
function generateCalendar(month, year) {
const calendarBody = document.querySelector("#calendar tbody");
calendarBody.innerHTML = "";
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const monthYearLabel = document.getElementById("monthYear");
monthYearLabel.textContent = `${monthNamesThai[month]} ${year + 543}`;
let date = 1;
for (let i = 0; i < 6; i++) {
const row = document.createElement("tr");
for (let j = 0; j < 7; j++) {
const cell = document.createElement("td");
if (i === 0 && j < firstDay) {
cell.classList.add("empty");
} else if (date > daysInMonth) {
cell.classList.add("empty");
} else {
cell.innerHTML = `<div class="date-number">${date}</div>`;
if (j === 0) cell.classList.add("sunday");
if (j === 6) cell.classList.add("saturday");
date++;
}
row.appendChild(cell);
}
calendarBody.appendChild(row);
}
}
function changeMonth(offset) {
currentMonth += offset;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
} else if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
generateCalendar(currentMonth, currentYear);
}
generateCalendar(currentMonth, currentYear);
</script>
</body>
</html>