Bài tập javascript - Viết hiệu ứng Loading đơn giản

Ở bài tập javascript 16 này, mình sẽ hướng dẫn các bạn viết hiệu ứng loadding, hiệu ứng này thường được gán với sự kiện onload. Tức là khi chúng ta truy cập vào một trang web thì nó phải load đúng không, lúc này sẽ xuất hiện hiệu ứng loading. Tuy nhiên mặc định thì xấu vãi, nên chúng ta cần tạo ra hiệu ứng loading. Okê mình sẽ làm một hiệu ứng đơn giản.

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

Bài tập javascript 16 – Viết hiệu ứng Viết hiệu ứng Loading

Mô tả bài tập: Mở trang web lên nó load đến 100% rồi hết thôi 😀

Demo:

Click vào bài tập js 16 để xem kết quả. Trong này thì mình giả lập hiệu ứng tải xong thì xuất hiện nội dung nha :D, cái này gán với event onload.

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

Code: html

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<div class="container">
			<h3>Loading...</h3>
			<div class="border">
				<div id="load"></div>
			</div>
		</div>
  </body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<h3>Loading...</h3>

</div>

</body>

</html>

Code:css

	.container {
    width: 300px;
    height: 100px;
    border: solid 1px;
    position: relative;
    margin: 200px auto;
}

    h3 {	position: absolute;top: 0px;left: 125px;font-weight: lighter;font-size: 15px;}

		h5 {
  			  position: absolute;
  			  bottom: -10%;
   			  left: 50%;
  			  transform: translateX(-50%);
		}
		body{
			background: black;
			color:white;
		}
		.border {
 		 	  border: 1px solid white;
		  	  height: 10px;
			  position: absolute;
  			  top: 50px;
   			  width: 100px;
    		  left: 50%;
              transform: translateX(-50%);
}
		div#load{
			width: 100px;
			height: 10px;
			background-color: white;
			position: absolute;
		}

.container {

width: 300px;

height: 100px;

border: solid 1px;

position: relative;

margin: 200px auto;

}

h3 { position: absolute;top: 0px;left: 125px;font-weight: lighter;font-size: 15px;}

h5 {

position: absolute;

bottom: -10%;

left: 50%;

transform: translateX(-50%);

}

body{

background: black;

color:white;

}

.border {

border: 1px solid white;

height: 10px;

position: absolute;

top: 50px;

width: 100px;

left: 50%;

transform: translateX(-50%);

}

div#load{

width: 100px;

height: 10px;

background-color: white;

position: absolute;

}

Code:js

var text = document.querySelector('h3');
		var div = document.querySelector('div#load');
		var num = document.querySelector('h5');
		var trangthai = "motcham";
		var x = 0;
		var w = 0;
		var loading = setInterval(cham,200);
		var numberplus = setInterval(chay,20);
		var divplus = setInterval(daira,20);
		function cham(){
				if(trangthai == 'motcham'){
				text.innerHTML = 'Loading' + '.';
				trangthai = 'haicham';
				}
				else if(trangthai == 'haicham'){
				text.innerHTML = 'Loading' + '..';
				trangthai = 'bacham';
				}
				else if(trangthai == 'bacham'){
				text.innerHTML = 'Loading' + '...';
				trangthai = 'motcham';
				}
				if(x == 100 && trangthai == 'motcham'){
					clearInterval(loading);
				}

		}
		function chay() {
				x++;
				num.innerHTML = x + '%';
				if(x == 100){
					clearInterval(numberplus);
				}
		}
		function daira(){
				w += 1;
				div.style.width = w +'px';
				if(w == 100){
					clearInterval(divplus);
				}
		}

var text = document.querySelector('h3');

var div = document.querySelector('div#load');

var num = document.querySelector('h5');

var trangthai = "motcham";

var x = 0;

var w = 0;

var loading = setInterval(cham,200);

var numberplus = setInterval(chay,20);

var divplus = setInterval(daira,20);

function cham(){

if(trangthai == 'motcham'){

text.innerHTML = 'Loading' + '.';

trangthai = 'haicham';

}

else if(trangthai == 'haicham'){

text.innerHTML = 'Loading' + '..';

trangthai = 'bacham';

}

else if(trangthai == 'bacham'){

text.innerHTML = 'Loading' + '...';

trangthai = 'motcham';

}

if(x == 100 && trangthai == 'motcham'){

clearInterval(loading);

}

function chay() {

x++;

num.innerHTML = x + '%';

if(x == 100){

clearInterval(numberplus);

}

function daira(){

w += 1;

div.style.width = w +'px';

if(w == 100){

clearInterval(divplus);

}

File js:

Trước tiên là mình truy xuất phần tử thông thường thôi.
Sau đó mình sử dụng phương thức setInterval( ) để thực hiện những thay đổi trên giao diện web sau những khoảng thời gian nhất định. Hay nói cách khác là thay đổi các phần tử của HTML.
Củ thể thì mình đã thay đổi 3 cái, thứ nhất là thêm … sau chữ loading ấy. Tiếp theo là cái thanh màu trắng ở giữa cái này thì mình tăng chiều rộng cho nó thôi. Cuối cùng là thay đổi cái số ở dưới, cái này thì thay đổi nội dung HTML .
Chỉ thế thôi 😀

Vậy là mình đã viết một hiệu ứng Loading đơn giản nhưng mà chập nhận được đúng không. Nếu ai thắc mắc gì thì cứ để comment ở dưới nhé. Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.