Nhận thông báo X
Đăng ký
Báo link hỏng X

Báo Hỏng
© 2017
BẢN TIN
    Chào mừng bạn đến với Nguyễn Lê Điệp
Cú pháp tìm kiếm dữ liệu nhanh nhất trên Google: [tên dữ liệu] + [nguyenlediep]. Xem hướng dẫn tại đây.

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ẻ! cheeky
Chia sẻ
Nguyễn Lê Điệp

Nguyễn Lê Điệp

Có sở thích lập trình, viết lách nên đã từng tham gia ở một số diễn đàn, đến năm 2017 mới có điều kiện sáng lập ra Nguyễn Lê Điệp chấm Com. Được sinh ra ở Bình Định, đang học tập và làm việc tại thành phố Hồ Chí Minh...