<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
font-family: 'Kanit', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 10px;
background-color: transparent;
}
.timer-container {
background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
text-align: center;
width: 100%;
max-width: 450px;
border: 2px solid #e0e0e0;
}
h1 {
color: #333;
margin-top: 0;
font-size: 22px;
}
.time-display {
font-size: 70px;
font-weight: 600;
color: #ff6b6b;
margin: 10px 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.05);
transition: color 0.3s;
}
.status-text {
color: #e74c3c;
font-size: 18px;
font-weight: 600;
height: 25px;
margin-bottom: 15px;
}
.controls {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
input[type="number"] {
width: 70px;
padding: 8px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 8px;
text-align: center;
outline: none;
}
input[type="number"]:focus {
border-color: #4facfe;
}
button {
padding: 10px 18px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
color: white;
transition: transform 0.1s, box-shadow 0.1s;
}
button:active {
transform: scale(0.95);
}
.btn-start { background-color: #2ecc71; box-shadow: 0 4px #27ae60; }
.btn-pause { background-color: #f1c40f; box-shadow: 0 4px #f39c12; color: #333; }
.btn-reset { background-color: #e74c3c; box-shadow: 0 4px #c0392b; }
.btn-start:hover { background-color: #27ae60; }
.btn-pause:hover { background-color: #f39c12; }
.btn-reset:hover { background-color: #c0392b; }
</style>
<div class="timer-container">
<h1>⏳ นาฬิกาจับเวลา</h1>
<div class="controls">
<label style="font-size: 16px; display: flex; align-items: center;">
เวลา (นาที):
<input type="number" id="minutesInput" value="5" min="1">
</label>
</div>
<div class="time-display" id="timeDisplay">05:00</div>
<div class="status-text" id="statusMessage"></div>
<div class="controls">
<button class="btn-start" id="btnStart">▶️ เริ่ม</button>
<button class="btn-pause" id="btnPause">⏸️ พัก</button>
<button class="btn-reset" id="btnReset">🔄 รีเซ็ต</button>
</div>
</div>
<audio id="alarmSound" src="https://actions.google.com/sounds/v1/alarms/bugle_tune.ogg" preload="auto"></audio>
<script>
let countdown;
let timeLeft = 0;
let isRunning = false;
const timeDisplay = document.getElementById('timeDisplay');
const minutesInput = document.getElementById('minutesInput');
const alarmSound = document.getElementById('alarmSound');
const statusMessage = document.getElementById('statusMessage');
function updateDisplay(seconds) {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
const displayMins = mins < 10 ? '0' + mins : mins;
const displaySecs = secs < 10 ? '0' + secs : secs;
timeDisplay.textContent = `${displayMins}:${displaySecs}`;
}
function startTimer() {
if (isRunning) return;
statusMessage.textContent = ""; // เคลียร์ข้อความแจ้งเตือน
if (timeLeft === 0) {
const inputMins = parseInt(minutesInput.value);
if (isNaN(inputMins) || inputMins <= 0) {
statusMessage.textContent = "กรุณาใส่ตัวเลขนาทีให้ถูกต้องครับ";
return;
}
timeLeft = inputMins * 60;
}
isRunning = true;
countdown = setInterval(() => {
timeLeft--;
updateDisplay(timeLeft);
if (timeLeft <= 0) {
clearInterval(countdown);
isRunning = false;
// เล่นเสียงและเปลี่ยนสีตัวอักษร
alarmSound.play().catch(e => console.log("เล่นเสียงไม่ได้"));
timeDisplay.style.color = "#c0392b";
statusMessage.textContent = "⏰ หมดเวลาแล้วครับ!";
}
}, 1000);
}
function pauseTimer() {
clearInterval(countdown);
isRunning = false;
}
function resetTimer() {
clearInterval(countdown);
isRunning = false;
timeLeft = 0;
statusMessage.textContent = "";
const inputMins = parseInt(minutesInput.value) || 0;
updateDisplay(inputMins * 60);
alarmSound.pause();
alarmSound.currentTime = 0;
timeDisplay.style.color = "#ff6b6b";
}
// ผูกคำสั่งกับปุ่มด้วย Event Listener แทน onclick ใน HTML
document.getElementById('btnStart').addEventListener('click', startTimer);
document.getElementById('btnPause').addEventListener('click', pauseTimer);
document.getElementById('btnReset').addEventListener('click', resetTimer);
minutesInput.addEventListener('input', () => {
if (!isRunning) {
const inputMins = parseInt(minutesInput.value) || 0;
updateDisplay(inputMins * 60);
timeLeft = 0;
statusMessage.textContent = "";
}
});
updateDisplay(parseInt(minutesInput.value) * 60);
</script>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
font-family: 'Kanit', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 10px;
background-color: transparent;
}
.timer-container {
background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
text-align: center;
width: 100%;
max-width: 450px;
border: 2px solid #e0e0e0;
}
h1 {
color: #333;
margin-top: 0;
font-size: 22px;
}
.time-display {
font-size: 70px;
font-weight: 600;
color: #ff6b6b;
margin: 10px 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.05);
transition: color 0.3s;
}
.status-text {
color: #e74c3c;
font-size: 18px;
font-weight: 600;
height: 25px;
margin-bottom: 15px;
}
.controls {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
input[type="number"] {
width: 70px;
padding: 8px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 8px;
text-align: center;
outline: none;
}
input[type="number"]:focus {
border-color: #4facfe;
}
button {
padding: 10px 18px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
color: white;
transition: transform 0.1s, box-shadow 0.1s;
}
button:active {
transform: scale(0.95);
}
.btn-start { background-color: #2ecc71; box-shadow: 0 4px #27ae60; }
.btn-pause { background-color: #f1c40f; box-shadow: 0 4px #f39c12; color: #333; }
.btn-reset { background-color: #e74c3c; box-shadow: 0 4px #c0392b; }
.btn-start:hover { background-color: #27ae60; }
.btn-pause:hover { background-color: #f39c12; }
.btn-reset:hover { background-color: #c0392b; }
</style>
<div class="timer-container">
<h1>⏳ นาฬิกาจับเวลา</h1>
<div class="controls">
<label style="font-size: 16px; display: flex; align-items: center;">
เวลา (นาที):
<input type="number" id="minutesInput" value="5" min="1">
</label>
</div>
<div class="time-display" id="timeDisplay">05:00</div>
<div class="status-text" id="statusMessage"></div>
<div class="controls">
<button class="btn-start" id="btnStart">▶️ เริ่ม</button>
<button class="btn-pause" id="btnPause">⏸️ พัก</button>
<button class="btn-reset" id="btnReset">🔄 รีเซ็ต</button>
</div>
</div>
<audio id="alarmSound" src="https://actions.google.com/sounds/v1/alarms/bugle_tune.ogg" preload="auto"></audio>
<script>
let countdown;
let timeLeft = 0;
let isRunning = false;
const timeDisplay = document.getElementById('timeDisplay');
const minutesInput = document.getElementById('minutesInput');
const alarmSound = document.getElementById('alarmSound');
const statusMessage = document.getElementById('statusMessage');
function updateDisplay(seconds) {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
const displayMins = mins < 10 ? '0' + mins : mins;
const displaySecs = secs < 10 ? '0' + secs : secs;
timeDisplay.textContent = `${displayMins}:${displaySecs}`;
}
function startTimer() {
if (isRunning) return;
statusMessage.textContent = ""; // เคลียร์ข้อความแจ้งเตือน
if (timeLeft === 0) {
const inputMins = parseInt(minutesInput.value);
if (isNaN(inputMins) || inputMins <= 0) {
statusMessage.textContent = "กรุณาใส่ตัวเลขนาทีให้ถูกต้องครับ";
return;
}
timeLeft = inputMins * 60;
}
isRunning = true;
countdown = setInterval(() => {
timeLeft--;
updateDisplay(timeLeft);
if (timeLeft <= 0) {
clearInterval(countdown);
isRunning = false;
// เล่นเสียงและเปลี่ยนสีตัวอักษร
alarmSound.play().catch(e => console.log("เล่นเสียงไม่ได้"));
timeDisplay.style.color = "#c0392b";
statusMessage.textContent = "⏰ หมดเวลาแล้วครับ!";
}
}, 1000);
}
function pauseTimer() {
clearInterval(countdown);
isRunning = false;
}
function resetTimer() {
clearInterval(countdown);
isRunning = false;
timeLeft = 0;
statusMessage.textContent = "";
const inputMins = parseInt(minutesInput.value) || 0;
updateDisplay(inputMins * 60);
alarmSound.pause();
alarmSound.currentTime = 0;
timeDisplay.style.color = "#ff6b6b";
}
// ผูกคำสั่งกับปุ่มด้วย Event Listener แทน onclick ใน HTML
document.getElementById('btnStart').addEventListener('click', startTimer);
document.getElementById('btnPause').addEventListener('click', pauseTimer);
document.getElementById('btnReset').addEventListener('click', resetTimer);
minutesInput.addEventListener('input', () => {
if (!isRunning) {
const inputMins = parseInt(minutesInput.value) || 0;
updateDisplay(inputMins * 60);
timeLeft = 0;
statusMessage.textContent = "";
}
});
updateDisplay(parseInt(minutesInput.value) * 60);
</script>