Code đếm ngược đến các ngày lễ trong năm của Việt Nam

<style type="text/css">

.times {text-transform: none; font-size: 14px; padding-right: NONE;}

#times-countdown {

    background: rgba(255,255,255,0);

    color: white;

    font-family: Oswald, Arial, Sans-serif;

    font-size: 165%;

    text-transform: uppercase;

    text-align: center;

    font-weight: normal;

    padding: 0 0 20px 0;

    border-radius: 0px;

}

#demthoigian {

    max-width: 100%;

    margin: 2px auto;

    text-align: center;

}

span#countdown {

    margin: 5px;

    border-radius: 9px;

    padding: 10px;

    text-align: center;

    background-color: none;

    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXkuNZ_TYhHnJ13oTnZUssO2i5kigW5kKTMSmDfOHVYbpOLWJSjQP3W-6adrb0of32DBNKHlVHBQ2VtWoGO8xlrUop_Xle8HicsdU_J8mAnbnUfUpelO32Kj7VHZXdVBZaqxgWPZWHQAmjNG0nmri2gVuaDonndJEHxy2eGSBzh9vMsNhNpT5Y_RmbY0/s1600/ggk.jpg");

    background-size: 200px 40px;

    background-repeat: no-repeat;

    color: #6633CC;

    font-size: 100%;

    font-weight: 300;

    font-family: 'Nove Cento';

}

#times-countdown h2 {

    font-size: 20px;

    color: #034688;

    font-weight: 300;

    text-align: center;

    padding: 6px;

    margin: 15px;

}

</style>

<div id='times-countdown'>

    <h2 id="holiday-name"></h2>

    <div id='demthoigian'>

        <span id='countdown'></span>

    </div>

</div>

<script type='text/javascript'>

(function() {

    var holidays = [

        { date: '01-01', name: 'Tết Dương Lịch' },

        { date: '01-29', name: 'Tết Nguyên Đán' }, // Tết 2025 (cập nhật mỗi năm)

        { date: '04-08', name: 'Giỗ Tổ Hùng Vương' }, // 10/3 ÂL 2025 (cập nhật mỗi năm)

        { date: '04-30', name: 'Ngày Giải phóng miền Nam' },

        { date: '05-01', name: 'Ngày Quốc tế Lao động' },

        { date: '09-02', name: 'Ngày Quốc khánh' },

        { date: '11-20', name: 'Ngày Nhà giáo Việt Nam' }

    ];

    var today = new Date();

    var currentYear = today.getFullYear();

    var closestHoliday = null;

    var targetDate = null;

    var minDaysLeft = Infinity;

    holidays.forEach(function(holiday) {

        var holidayDate = new Date(currentYear, parseInt(holiday.date.split('-')[0]) - 1, parseInt(holiday.date.split('-')[1]));

        // Nếu ngày lễ đã qua, chuyển sang năm tiếp theo

        if (holidayDate < today) {

            holidayDate.setFullYear(currentYear + 1);

        }

        var daysLeft = Math.ceil((holidayDate - today) / (1000 * 60 * 60 * 24));

        if (daysLeft < minDaysLeft) {

            minDaysLeft = daysLeft;

            closestHoliday = holiday;

            targetDate = holidayDate;

        }

    });

    if (closestHoliday) {

        document.getElementById("holiday-name").innerHTML = "Đếm ngược đến " + closestHoliday.name;

        function updateCountdown() {

            var currentDate = new Date().getTime();

            var secondsLeft = (targetDate.getTime() - currentDate) / 1000;

            var days = parseInt(secondsLeft / 86400);

            secondsLeft = secondsLeft % 86400;

            var hours = parseInt(secondsLeft / 3600);

            secondsLeft = secondsLeft % 3600;

            var minutes = parseInt(secondsLeft / 60);

            var seconds = parseInt(secondsLeft % 60);

            document.getElementById("countdown").innerHTML = days + " <span class='times'>ngày</span> " + 

                hours + " <span class='times'>giờ</span> " + 

                minutes + " <span class='times'>phút</span> " + 

                seconds + " <span class='times'>giây</span>";

        }

        setInterval(updateCountdown, 1000);

        updateCountdown();

    }

})();

</script>

Read more »

Posted in: code,html

Code đếm ngược có hình nền

<style type="text/css">

.times{text-transform:none;font-size:14px;padding-right:NONE}

#times-countdown{background:rgba(255,255,255,0);color:white;font-family:Oswald,Arial,Sans-serif;font-size:165%;text-transform:uppercase;text-align:left;font-weight:normal;padding:0 0 20px 0;border-radius:0px}

#demthoigian{max-width:100%;margin:2px auto;text-align:center}

span#countdown{margin:5px;border-radius:9px;padding:10px;text-align:center;background-color:none;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXkuNZ_TYhHnJ13oTnZUssO2i5kigW5kKTMSmDfOHVYbpOLWJSjQP3W-6adrb0of32DBNKHlVHBQ2VtWoGO8xlrUop_Xle8HicsdU_J8mAnbnUfUpelO32Kj7VHZXdVBZaqxgWPZWHQAmjNG0nmri2gVuaDonndJEHxy2eGSBzh9vMsNhNpT5Y_RmbY0/s1600/ggk.jpg");background-size:200px 40px;background-repeat:no-repeat;color:#6633CC;font-size:100%;font-weight:300;font-family:'Nove Cento'}

#times-countdown h2{font-size:20px;color:#034688;font-weight:300;text-align:center;padding:6;margin:15px}

</style>

 <div id='times-countdown'>

     <div id='demthoigian'>

   <span id='countdown'/>

  </span></div>

</div>

<script type='text/javascript'>

//<![CDATA[

// đặt ngày để bắt đầu đếm ngược, ở đây là 01-1-2025

var target_date = new Date("jan 29, 2025").getTime();

// thêm biến cho các đơn vị thời gian

var days, hours, minutes, seconds;

//đặt id là countdown

var countdown = document.getElementById("countdown");

// cập nhật id "countdown" mỗi 1 giây

setInterval(function () {

    // thiết lập cho ngày giờ hiện tại và ngày kết thúc

    var current_date = new Date().getTime();

    var seconds_left = (target_date - current_date) / 1000;

    // tính ngày, giờ, phút và giây

    days = parseInt(seconds_left / 86400);

    seconds_left = seconds_left % 86400;

   

    hours = parseInt(seconds_left / 3600);

    seconds_left = seconds_left % 3600;

   

    minutes = parseInt(seconds_left / 60);

    seconds = parseInt(seconds_left % 60);

   

    // thiết lập cho biến countdown hiển thị ra ngoài

countdown.innerHTML = days + " <span class=\'times\'>ngày</span> " + hours + " <span class=\'times\'>giờ</span> "

  + minutes + " <span class=\'times\'>phút</span> " + seconds + " <span class=\'times\'>giây</span>";

}, 1000);

//]]>

</script>

Read more »

Posted in: code,html,Lập Trình