Share code đồng hồ có ngày tháng năm cho blog/website

Một website có đồng hồ sẽ trở nên sinh động và chuyên nghiệp hơn. Đồng hồ giúp độc giả dễ dàng theo dõi và quản lý thời gian. Sau đây, Code Pro sẽ hướng dẫn các bạn cách tạo đồng hồ cho blog/website đơn giản nhất.

Các bước tạo đồng hồ

Bước 1: Thêm CSS làm đẹp đồng hồ

.codepro-time{text-align:center;}
#codepro-hour{font-weight:400;display:block;font-size:30px;margin: 0 0 5px;letter-spacing:5px;}

Bước 2: Thêm javascript get ngày giờ

var myVar = setInterval(function() {
    myTimer()
}, 1000);
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("codepro-hour").innerHTML = t;
}
n = new Date();
if (n.getTimezoneOffset() == 0) t = n.getTime() + (7 * 60 * 60 * 1000);
else t = n.getTime();
n.setTime(t);
var dn = new Array("Chủ nhật", "Thứ 2", "Thứ 3", "Thứ 4", "Thứ 5", "Thứ 6", "Thứ 7");
d = n.getDay();
m = n.getMonth() + 1;
y = n.getFullYear()
var date = dn[d] + ", " + (n.getDate() < 10 ? "0" : "") + n.getDate() + "/" + (m < 10 ? "0" : "") + m + "/" + y;
document.getElementById("codepro-date").innerHTML = date;

Bước 3: Hiển thị → chèn code dưới đây vào nơi bạn cần hiển thị đồng hồ

<div class="codepro-time">
  <span id="codepro-hour"></span>
  <span id="codepro-date"></span>
</div>

Bước 4: Lưu lại và tận hưởng thành quả!

Code đầy đủ

Dành cho những bạn sử dụng landing page, blogger hoặc trang tĩnh → chèn toàn bộ code dưới đây vào phần muốn hiển thị là xong!

<div class="codepro-time">
  <span id="codepro-hour"></span>
  <span id="codepro-date"></span>
</div>
<style>
	.codepro-time{text-align:center;}
	#codepro-hour{font-weight:400;display:block;font-size:30px;margin: 0 0 5px;letter-spacing:5px;}
</style>
<script type="text/javascript">
    var myVar = setInterval(function() {
        myTimer()
    }, 1000);
    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("codepro-hour").innerHTML = t;
    }
    n = new Date();
    if (n.getTimezoneOffset() == 0) t = n.getTime() + (7 * 60 * 60 * 1000);
    else t = n.getTime();
    n.setTime(t);
    var dn = new Array("Chủ nhật", "Thứ 2", "Thứ 3", "Thứ 4", "Thứ 5", "Thứ 6", "Thứ 7");
    d = n.getDay();
    m = n.getMonth() + 1;
    y = n.getFullYear()
    var date = dn[d] + ", " + (n.getDate() < 10 ? "0" : "") + n.getDate() + "/" + (m < 10 ? "0" : "") + m + "/" + y;
  	document.getElementById("codepro-date").innerHTML = date;
</script>

Lời kết

Trên đây là bộ code và hướng dẫn tạo đồng hồ có ngày tháng năm cho blog/website. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!