Tạo đồng hồ cơ cho website bằng javascript

Tạo đồng hồ cơ cho website bằng javascript là cách sử dụng ngôn ngữ #javascript để tạo ra một đồng hồ cơ giống như các đồng hồ treo tường chạy theo thời gian thực.

Tiến hành code

Để tạo được đồng hồ cơ bằng javascript cho #website các bạn thực hiện như các bước sau:

Bước 1: Chuẩn bị 4 hình gồm đồng hồ, kim giờ, kim phút và kim giây với kích thước 480px cho chiều ngang và dọc

Bước 2: Chèn #code javascript bên dưới vào trong thẻ head

var action=setInterval(function(){
  var time=new Date();   
  var svn=time.getSeconds();
  var mvn=time.getMinutes();
  var hvn=time.getHours();
  var spvn=svn*6;
  var mpvn=(mvn+svn/60)*6;
  var hpvn=(hvn+mvn/60)*30;
  $('#second_vn').css('transform','rotate('+spvn+'deg)');
  $('#minute_vn').css('transform','rotate('+mpvn+'deg)');
  $('#hour_vn').css('transform','rotate('+hpvn+'deg)');
},1000)

Bước 3: Chèn CSS
Để đồng hồ hiển thị đẹp hơn, bát mắt hơn bạn cần chèn đoạn code bên dưới vào trong thẻ #head

#clock_vn_outer{
	overflow: hidden;
	width: 100px;
	height: 100px;
	margin: auto;
}
#clock_vn_outer div{
	position: absolute;
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
}
#clock_vn{
	background: url('../images/img/clock_white.png') no-repeat center;
	background-size: cover;
}
#hour_vn{
	background: url('../images/img/hour_white.png') no-repeat center;
	background-size: cover;
}
#minute_vn{
	background: url('../images/img/minute_white.png') no-repeat center;
	background-size: cover;
}
#second_vn{
	background: url('../images/img/second_white.png') no-repeat center;
	background-size: cover;
}

Bước 4: Chèn code #HTML
Để hiển thị đồng hồ lên trang web bạn chèn đoạn #code bên dưới vào nơi mà bạn muốn hiển thị đồng hồ trên trang #web của mình

<div id="clock_vn_outer">
    <div id="clock_vn">
        <div id="hour_vn"></div>
        <div id="minute_vn"></div>
        <div id="second_vn"></div>
    </div>
</div>

Kết quả đạt được

Sau khi bạn thực hiện đúng như các bước bên trên bạn sẽ được kết quả như bên dưới

Chúc các bạn thành công và vui vẻ!