home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

JavaScript Countdown Timer:บทช่วยสอน

ตัวนับเวลาถอยหลังถูกใช้ทั่วอินเทอร์เน็ตโดยผู้ที่ต้องการนับถอยหลังสู่งานสำคัญ

คุณสามารถใช้ตัวนับเวลาถอยหลังเพื่อนับถอยหลังสู่การเปิดตัวเว็บไซต์ใหม่ของคุณ นาฬิกาจับเวลาถอยหลังสามารถทำเครื่องหมายเมื่อคุณกำลังจะประกาศผลิตภัณฑ์ มีความเป็นไปได้มากมายให้คุณสำรวจ

ในคู่มือนี้ เราจะแสดงวิธีสร้างตัวจับเวลาถอยหลังใน JavaScript โดยใช้เทคโนโลยีสามอย่าง:HTML, CSS และ JavaScript เริ่มกันเลย!

การตั้งค่าหน้าเว็บของเรา

ขั้นตอนแรกคือการตั้งค่าหน้าเว็บพื้นฐานของเรา ในคู่มือนี้ เราจะไม่ต้องกังวลกับการใช้ไลบรารีภายนอกใดๆ เราจะทำให้มันเรียบง่ายและใช้ HTML, CSS และ JavaScript แบบเก่าธรรมดา

เริ่มต้นด้วยการสร้างไฟล์ HTML ของเรา:

<!DOCTYPE html>
<html>
	<script>
		// We'll store our JavaScript code here
	</script>
	<style>
		// We'll write our CSS styles here
	</style>
	<body>
		<h1>It's almost time…</h1>
		<div id="timer"></div>
	</body>
</html>

รหัสของเราไม่ได้ส่งคืนสิ่งใดเป็นพิเศษในขณะนี้ ดูด้านล่าง:

JavaScript Countdown Timer:บทช่วยสอน

ปรากฏในลักษณะนี้เนื่องจากเรายังไม่ได้เพิ่มสไตล์ใด ๆ ให้กับโค้ดของเราหรือสร้างตัวจับเวลา JavaScript ของเรา ไปที่การสร้าง JavaScript ที่จะขับเคลื่อนตัวจับเวลาของเรา

การสร้างตัวจับเวลาของเรา

JavaScript มีวัตถุที่มีประโยชน์ที่เรียกว่า Date ซึ่งเราสามารถใช้เพื่อทำงานกับวันที่และเวลา เราจะใช้วัตถุนี้เพื่อจุดประสงค์สองประการ:เพื่อรับการประทับเวลาของเวลาที่เราต้องการนับถอยหลัง และรับวันที่ปัจจุบัน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ในบทช่วยสอนนี้ เราจะเขียนสคริปต์ทั้งหมดของเราในแท็ก เราจะไม่ใช้สคริปต์ภายนอกใดๆ

การลบวันที่ที่เรากำลังนับถอยหลังจากวันที่ปัจจุบันจะทำให้เรามีความแตกต่างระหว่างสองวันที่นี้:

var timeLeft = +new Date("2021-05-04") - +new Date();

รหัสนี้จะคำนวณจำนวนวันที่เหลือจนถึงวัน Star Wars ถัดไป ซึ่งก็คือวันที่ 4 พฤษภาคม 2021

ในขณะที่เราทราบความแตกต่างระหว่างสองวันนี้ก็มีปัญหาเล็กน้อย อันดับแรก เรายังไม่มีตัวจับเวลาที่นับถอยหลัง ประการที่สอง วันที่ของเราไม่ได้จัดเก็บในรูปแบบที่มนุษย์อ่านได้ง่าย มันถูกเก็บไว้เป็นมิลลิวินาที ซึ่งไม่สะดวกสำหรับเราอย่างแน่นอน เราจำเป็นต้องแปลงเวลาเป็นวัน ชั่วโมง และนาที

ในการคำนวณเวลาที่เหลืออยู่ในรูปแบบที่อ่านง่ายขึ้น เราจะใช้รหัสต่อไปนี้:

var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

เราสามารถจัดรูปแบบค่าเป็นสตริงโดยใช้รหัสนี้:

const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;

ในรหัสนี้ เราใช้การแก้ไขสตริงเพื่อแทนที่ค่าที่เราคำนวณไว้ก่อนหน้านี้ ซึ่งจะให้การประทับเวลาแก่เรา เช่น 314 วัน 13 ชั่วโมง 52 นาที

ตอนนี้เราได้สร้างการประทับเวลาแล้ว เราสามารถวางบนหน้าเว็บของเรา:

document.getElementById("timer").innerHTML = timeLeftText;

เราสามารถย้ายโค้ดทั้งหมดของเราไปเป็นฟังก์ชัน:

function countdown() {
	var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
document.getElementById("timer").innerHTML = timeLeftText;
}

countdown();

เมื่อเราโหลดหน้าของเรา สิ่งต่อไปนี้จะถูกส่งกลับ:

JavaScript Countdown Timer:บทช่วยสอน

ตอนนี้เรามีตัวจับเวลาแล้ว เราเสร็จแล้วสำหรับวันนี้ใช่ไหม ไม่; ไม่เร็วนัก หากคุณรอสักครู่ คุณจะเห็นตัวจับเวลาของเราไม่นับถอยหลัง นั่นเป็นเพราะเราต้องบอกให้เบราว์เซอร์ของเราอัปเดตทุกนาที เราทำโดยใช้รหัสนี้:

setInterval(countdown, 60000);

ควรเพิ่มรหัสนี้หลังจากประกาศฟังก์ชัน countdown() ของเราแล้ว การดำเนินการนี้จะรีเฟรชหน้าเว็บของเราทุกๆ 60,000 มิลลิวินาที ซึ่งเทียบเท่ากับทุกๆ 60 วินาที

ตอนนี้เมื่อเราอัปเดตรหัสของเรา คุณจะเห็นว่ามันเปลี่ยนแปลงทุกนาที!

เพิ่มสไตล์บางส่วน

นาฬิกาจับเวลาถอยหลังของเราอาจใช้งานได้ แต่ก็ไม่ได้สวยงามตามต้องการ มาสร้างสไตล์สองสามแบบเพื่อทำให้หน้าของเราน่าสนใจยิ่งขึ้น:

<style>
body {
	padding-top: 20%;
	height: 100vh;
background: linear-gradient(to bottom right, #CAA89C, #434EFC);
}
h1, p {
	text-align: center;
	color: white;
}
</style>

หน้าเว็บของเราตอนนี้มีลักษณะดังนี้:

JavaScript Countdown Timer:บทช่วยสอน

อย่างที่คุณเห็น หน้าของเราตอนนี้มีพื้นหลังแบบไล่ระดับ ข้อความของเราถูกจัดชิดตรงกลางและข้อความของเราจะปรากฏเป็นสีขาว ดูดีมาก!

บทสรุป

ตัวนับเวลาถอยหลังเป็นคุณลักษณะที่สำคัญของหลายๆ ไซต์ คุณจะเห็นการนับถอยหลังทั้งบนหน้าเว็บส่วนตัวและหน้าเว็บแบบมืออาชีพ บล็อกของบุคคลอาจมีการนับถอยหลังสู่งานแต่งงานของพวกเขา เว็บไซต์ของบริษัทอาจมีการนับถอยหลังสู่การเปิดตัวผลิตภัณฑ์

ตอนนี้คุณพร้อมที่จะสร้างตัวนับเวลาถอยหลัง JavaScript ของคุณเองอย่างผู้เชี่ยวชาญแล้ว!