อัสสาลามูอาลัยกุม
วันนี้ผมมาแจกโค้ดนาฬิกาจับเวลา (Basic Stopwatch) เผื่อสมาชิกสามารถนำไปประยุกต์ใช้ให้เกิดประโยชน์
ตัวอย่าง / Demo
https://script.google.com/macros/s/AKfycbzLeFsp2Xzur68ptWm_hSAuU3f4_Q9jFZqN6LmuJMdoxogSzJf-UzZfaFQ6UNeCl3w1iw/exec
หรือท่านสามารถฝึกสร้างเองด้วยการคัดลอกโค้ดด้านล่างนี้
Code.gs
==========================
/** ====================
* ตัวอย่างนาฬิกาจับเวลา
* โดยครูอับดุลเลาะ
* https://dun0077.github.io
* ===================== */
let doGet = () => HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setTitle('Basic Stopwatch by Teacher Abdul')
let include = (page) => HtmlService.createHtmlOutputFromFile(page)
.getContent()
index.html
==========================
<!-- ====================
* ตัวอย่างนาฬิกาจับเวลา
* โดยครูอับดุลเลาะ
* https://dun0077.github.io
* ===================== -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Stopwatch by Teacher Abdul</title>
<?!= include('css') ?>
</head>
<body>
<div class="stopwatch">
<h2>นาฬิกาจับเวลา</h2>
<div id="display">00:00:00</div>
<button id="startStopBtn" onclick="startStop()"> เริ่ม </button>
<button id="resetBtn" onclick="reset()">รีเซ็ต</button>
</div>
<?!= include('java') ?>
</body>
</html>
css
==========================
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.stopwatch {
text-align: center;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#display {
font-size: 48px;
margin-bottom: 20px;
}
button {
font-size: 16px;
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#startStopBtn {
background-color: #4CAF50;
color: white;
}
#resetBtn {
background-color: #f44336;
color: white;
}
</style>
java
==========================
<script>
let timer;
let isRunning = false;
let startTime;
let elapsedTime = 0;
// เมื่อกดปุ่มเริ่มหรือหยุด
function startStop() {
if (isRunning) { //ถ้าการจับเวลากำลังวิ่งอยู่
clearInterval(timer); //สั่งให้หยุด
isRunning = false; //เปลี่ยนสถานะให้เป็น false
document.getElementById('startStopBtn').textContent = ' เริ่ม '; //เปลี่ยนข้อความในปุ่ม
} else {
startTime = Date.now() - elapsedTime; //เซ็ตเวลาเริ่มตอนกดปุ่มเริ่ม
timer = setInterval(updateDisplay, 1000); //เริ่มจับเวลา
isRunning = true; //เปลี่ยนสถานะให้เป็น true
document.getElementById('startStopBtn').textContent = ' หยุด '; //เปลี่ยนข้อความในปุ่ม
}
}
// เมื่อกดปุ่มรีเซ็ต
function reset() {
clearInterval(timer); //สั่งให้หยุด
isRunning = false; //เปลี่ยนสถานะให้เป็น false
elapsedTime = 0; //เซ็ตเวลาที่ผ่านไปแล้วเป็น 0
document.getElementById('display').textContent = '00:00:00'; //รีเซ็ตการแสดงผล
document.getElementById('startStopBtn').textContent = ' เริ่ม '; //เปลี่ยนข้อความในปุ่ม
}
// อัพเดตการแสดงผลจับเวลา
function updateDisplay() {
elapsedTime = Date.now() - startTime; //เซ็ตเวลาที่ผ่านไปแล้ว
const hours = Math.floor(elapsedTime / (1000 * 60 * 60)); //คำนวณค่าชั่วโมง
const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60)); //คำนวณและดึงค่านาทีมาใช้
const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000); //คำนวณค่าและดึงค่าวินาทีมาใช้
document.getElementById('display').textContent =
`${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; //อัพเดตการแสดงผลหน้าเว็บ
}
// แปลงให้เป็นเลข 2 หลัก
function pad(number) {
return number.toString().padStart(2, '0');
}
</script>