Bài tập javascript 20 - Làm banner đếm ngược thời gian

Thu qua là đông, đông đi rồi xuân đến. Thế là sắp đến tết rồi :)) vậy nên trong bài tập này mình sẽ hướng dẫn các bạn làm banner đếm ngược thời gian đến tết :D. Để làm được bài tập này chúng ta cần sử dụng một số phương thức liên quan đến thời gian. Mình xin được bắt đầu bài tập

Kiến thức cần có:

Bài tập javascript 20 – Làm banner đếm ngược thời gian

Mô tả bài tập: Thời gian cứ được đếm ngược cho đến tết thôi :v

Demo:

Click vào bài tập js 20 để xem kết quả.

Mình sẽ code và giải thích chi tiết ngay phía sau.

Code: html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="https://fonts.googleapis.com/css?family=Lobster|Quicksand:400,500,700&amp;subset=vietnamese" rel="stylesheet"></head>

<body>
	<div class="banner" style="background:#0E0E0E url(https://image.freepik.com/free-vector/gold-new-year-background_23-2147982532.jpg) no-repeat center ">
		<p></p>
		<hr>
		<div class="txt">
		<h3>Tết Tết Tết, Về nhà ăn tết !!!</h3>
		
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<body>

<p></p>

<hr>

</div>

</body>

</html>

Code:css

*{
		margin:0;
		padding:0;
	}
	html,body,div.banner{
		width: 100%;
		height: 100%;
		font-family: 'Quicksand', sans-serif;
		color: white;
	}
	div.banner{
		position: relative;
	}

	div > p {
	    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 2px solid;
    font-size: 22px;
    padding: 10px;
    border-top: 2px solid;
	}
	.txt {
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translateX(-50%);
    color: #fbdda7;
    font-size: 25px;
}

margin:0;

padding:0;

}

html,body,div.banner{

width: 100%;

height: 100%;

font-family: 'Quicksand', sans-serif;

color: white;

}

div.banner{

position: relative;

}

div > p {

position: absolute;

top: 3%;

left: 50%;

transform: translateX(-50%);

border-bottom: 2px solid;

font-size: 22px;

padding: 10px;

border-top: 2px solid;

}

.txt {

position: absolute;

top: 19%;

left: 50%;

transform: translateX(-50%);

color: #fbdda7;

font-size: 25px;

}

Code: js

var p = document.querySelector('p');
		var tet = new Date("Feb 5,2019 24:00:00").getTime();
		//Tổng số giây 
		var countDown = setInterval(run,1000);
		function run(){

			var now = new Date().getTime();
			//Số s đến thời gian hiện tại
			var timeRest = tet - now;
			//Số s còn lại để đến tết;
			var day = Math.floor(timeRest/(1000*60*60*24));
			//Số ngày còn lại
			var hours = Math.floor(timeRest%(1000*60*60*24)/(1000*60*60));
			// Số giờ còn lại
			var minute = Math.floor(timeRest%(1000*60*60)/(1000*60));
			// Số phút còn lại
			var sec = Math.floor(timeRest%(1000*60)/(1000));
			// Số giây còn lại
			p.innerHTML = day+' DAY '+hours+' : ' + minute + ' : ' + sec +"  ";
                        if(timeRest <= 0){
                        clearInterval(counDown);
                        p.innerHTML = "HPNY";
                        }              
    }

var p = document.querySelector('p');

var tet = new Date("Feb 5,2019 24:00:00").getTime();

//Tổng số giây

var countDown = setInterval(run,1000);

function run(){

var now = new Date().getTime();

//Số s đến thời gian hiện tại

var timeRest = tet - now;

//Số s còn lại để đến tết;

var day = Math.floor(timeRest/(1000*60*60*24));

//Số ngày còn lại

var hours = Math.floor(timeRest%(1000*60*60*24)/(1000*60*60));

// Số giờ còn lại

var minute = Math.floor(timeRest%(1000*60*60)/(1000*60));

// Số phút còn lại

var sec = Math.floor(timeRest%(1000*60)/(1000));

// Số giây còn lại

p.innerHTML = day+' DAY '+hours+' : ' + minute + ' : ' + sec +" ";

if(timeRest <= 0){

clearInterval(counDown);

p.innerHTML = "HPNY";

}

Kết quả:

Giải thích:

Đầu tiên mình tạo ra một biến tet truyền vào biến thời gian dừng là tháng ngày năm giờ phút giây lúc giao thừa và lấy ra giây. Sau đó dùng phương thức getTime() lấy ra tổng số mili giây tính đến thời điểm đó.
Sử dụng phương thức setInterval(run,1000) cứ sau 1 giây chạy function run()
Trong function run() Mình khởi biến now truyền vào biến thời gian hiện tại bằng phương thức getDate() và lấy ra tổng số mili giây bằng phương thức getTime()
Khởi tạo biến timeRest để xác định số mili giây còn lại, và các biến day, hours , minute, sec mình đã chú thích chi tiết mấy cái này dưới code rồi.
Lấy được số tham số cần rồi thì truyền vào html thôi
Dùng hàm clearInterval() đề dừng khi đến tết 😀

Okê xong rồi đấy, vậy là chúng ta đã có một banner đếm ngược thời gian rồi. Mình sẽ trở lại với những hiệu ứng khác, mình xin được kết thúc bài viết tại đây.

Xem các bài tập khác tại đây