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, Tricker Channel sẽ hướng dẫn các bạn cách tạo đồng hồ cho blog/website đơn giản nhất.

Đồng hồ Online

Demo Đồng Hồ

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>

Facebook: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...