Javascript

Tạo text thay đổi theo ngày (lịch sự kiện - calendar event)

Nói cho chính xác thì đây là một thủ thuật nhỏ, hơi phần nhiều là bắt chước tính năng Google Doodles . Đơn giản có thể hiểu là ta sẽ cho một phần nội dung nào đó hiển thị theo ngày tháng của lịch và …

Hung.Pro.VN

Developer Windows

---

• 09/05/2018
• Views

• #Javascript

Nói cho chính xác thì đây là một thủ thuật nhỏ, hơi phần nhiều là bắt chước tính năng Google Doodles. Đơn giản có thể hiểu là ta sẽ cho một phần nội dung nào đó hiển thị theo ngày tháng của lịch và thay đổi theo từng ngày cũng như hiển thị nội dung đặc thù phù hợp với một ngày lễ hay kỷ niệm gì đó - giống google doodles vậy đấy!

Thuật toán thì khá đơn giản thôi. Ta sẽ viết 1 hàm và sử dụng biến để lấy ngày tháng hiện tại sao đó cho biến đó vào lệnh switch và quét qua từng tháng ngày để xét sự trùng khớp và nếu nó tìm thấy được ngày tháng trùng khớp đó thì sẽ hiển thị nội dung tường ứng đã cài đặt ra.

FULL CODE

<div id="calendar">Sự kiện hôm nay</div>
<script type="text/javascript">
function Calendar(idBox){
    var box = document.getElementById(idBox),
        date = new Date(),
        dd = date.getDate(),
        mm = date.getMonth() +1,
        d = date.getDay(),
      
        displayCld= "", displayOffi="";
    switch(mm){
        case 1:
            switch(dd){
                case 1:
                    displayCld = "Happy New Year";
                    break;
            }
            break;
      
        case 2:
            switch(dd){
                case 14:
                    displayCld = "Happy Valentine Day";
                    break;
            }
            break;
      
        case 3:
            switch(dd){
                case 8:
                    displayCld = "Happy Women's Day";
                    break;
                case 28:
                    displayCld = "Today()";
                    break;
            }
            break;
          
        case 4:
            switch(dd){
                case 1:
                    displayCld = "Ngay Ca Thang 4";
                    break;
                  
                case 30:
                    displayCld = "Ngay giai phong mien Nam";
            }
            break;
      
        case 5:
            switch(dd){
                case 1:
                    displayCld = "Worker's Day";
                    break;
            }
            break;
          
        case 6:
            switch(dd){
                case 1:
                    displayCld = "Happy Children's Day";
                    break;
            }
            break;
      
        case 9:
            switch(dd){
                case 2:
                    displayCld = "Ngay Ky Niem Quoc Khanh";
                    break;
            }
            break;
      
        case 10:
            switch(dd){
                case 10:
                    displayCld = "Ngay nguoi cao tuoi Viet Nam";
                    break;
              
                case 20:
                    displayCld = "Ngay phu nu Viet Nam";
                    break;
            }
            break;
      
        case 11:
            switch(dd){
                case 20:
                    displayCld = "Happy Teacher's Day";
                    break;
            }
            break;
      
    }
    
    displayOffi = "Hôm nay là " + dd + "/"+ mm +"/"+ date.getFullYear();
  
    if (""!==displayCld) displayOffi +=  " | " + displayCld;
  
    box.innerHTML = displayOffi;
}
Calendar('calendar');
</script>

Khi các bạn sữ dụng đoạn code trên thì kết quả là :

Sự kiện hôm nay

Chúc các bạn thành công với tiện ích này :)

Previous post

Tạo text thay đổi theo ngày (lịch sự kiện - calendar event)

Next post

Tạo text thay đổi theo ngày (lịch sự kiện - calendar event)

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article