<div class="lich">
      <div id="days"></div>
      <div id="dates"></div>
      <div id="times"></div>
</div>

<style>
.lich{
font-family:arial;
padding:20px;
background-color:#333;
background-image: url(https://foxtheme.net/wp-content/uploads/2023/10/demo-clockimgae.png);
background-size: cover;
border-radius:10px;
font-size:30px;
color:#fff;
}
#days {
font-size: 60px;
font-weight: bold;
background: linear-gradient(19deg, rgb(236 199 103) 0%, rgb(249 249 222) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#times {
margin-top: 10px;
background: #f0d7a536;
color: #ddcda1;
padding: 20px;
border-radius: 7px;
border: 1px solid #ddbe6424;
}
</style>

<script>
window.onload = setInterval(clock,1000);
function clock()
{
var d = new Date();
var date = d.getDate();
var month = d.getMonth();
var montharr =["Tháng 1","Tháng 2","tháng 3","Tháng 4","Tháng 5","Tháng 6","Tháng 7","Tháng 8","Tháng 9","Tháng 10","tháng 11","Tháng 12"];
month=montharr[month];
var year = d.getFullYear();
var day = d.getDay();
var dayarr =["Chủ Nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7"];
day=dayarr[day];
var hour =d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
document.getElementById("days").innerHTML=day;
document.getElementById("dates").innerHTML=date+" "+month+" "+year;
document.getElementById("times").innerHTML=hour+":"+min+":"+sec;
}
</script>

<div class="lich">
      <div id="days"></div>
      <div id="dates"></div>
      <div id="times"></div>
</div>

<style>
.lich{
font-family:arial;
padding:20px;
background-color:#333;
background-image: url(https://foxtheme.net/wp-content/uploads/2023/10/demo-clockimgae.png);
background-size: cover;
border-radius:10px;
font-size:30px;
color:#fff;
}
#days {
font-size: 60px;
font-weight: bold;
background: linear-gradient(19deg, rgb(236 199 103) 0%, rgb(249 249 222) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#times {
margin-top: 10px;
background: #f0d7a536;
color: #ddcda1;
padding: 20px;
border-radius: 7px;
border: 1px solid #ddbe6424;
}
</style>

<script>
window.onload = setInterval(clock,1000);
function clock()
{
var d = new Date();
var date = d.getDate();
var month = d.getMonth();
var montharr =["Tháng 1","Tháng 2","tháng 3","Tháng 4","Tháng 5","Tháng 6","Tháng 7","Tháng 8","Tháng 9","Tháng 10","tháng 11","Tháng 12"];
month=montharr[month];
var year = d.getFullYear();
var day = d.getDay();
var dayarr =["Chủ Nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7"];
day=dayarr[day];
var hour =d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
document.getElementById("days").innerHTML=day;
document.getElementById("dates").innerHTML=date+" "+month+" "+year;
document.getElementById("times").innerHTML=hour+":"+min+":"+sec;
}
</script>

Mã nhúng & chia sẻ

Code tạo hộp hiển thị thời gian và ngày tháng