Hướng dẫn tạo Digital Clock cho blogspot

Hướng dẫn tạo Digital Clock cho blogspot, tạo đồnh hồ cho blogspot đơn giản nhất, hiệu ứng chuyển động đẹp, hiệu ứng phát sáng đầy màu sắc bằng cách sử dụng HTML CSS & JavaScript.

Tạo hiệu ứng chiế đồng hồ đẹp cho blogspot đơn giản như demo bên dưới dưới.

Các bước thực hiện như sau:

Bước 1: Thêm CSS, các bạn lưu ý css của html,body ccs bạn có thể xóa đi nếu nó đụng với css của template.

*{margin:0;padding:0;font-family:'Poppins',sans-serif}

html,body{display:grid;height:100%;place-items:center}

.wrapper{height:100px;width:360px;position:relative;background:linear-gradient(135deg,#14ffe9,#ffeb3b,#ff00e0);border-radius:10px;cursor:default;animation:animate 1.5s linear infinite}

.wrapper .display,.wrapper span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

.wrapper .display{z-index:999;height:85px;width:345px;background:#1b1b1b;border-radius:6px;text-align:center}

.display #time{line-height:85px;color:#fff;font-size:50px;font-weight:600;letter-spacing:1px;background:linear-gradient(135deg,#14ffe9,#ffeb3b,#ff00e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:animate 1.5s linear infinite}

@keyframes animate{100%{filter:hue-rotate(360deg)}}

.wrapper span{height:100%;width:100%;border-radius:10px;background:inherit}

.wrapper span:first-child{filter:blur(7px)}

.wrapper span:last-child{filter:blur(20px)}

Bước 2: Thêm HTML

<div class="wrapper">

    <div class="display">

        <div id="time">

        </div>

    </div>

    <span></span>

    <span></span>

</div>

Bước 3: Thêm JavaScript

<script>

    //<![CDATA[

    setInterval(() => {

        const time = document.querySelector(".display #time");

        let date = new Date();

        let hours = date.getHours();

        let minutes = date.getMinutes();

        let seconds = date.getSeconds();

        let day_night = "AM";

        if (hours > 12) {

            day_night = "PM";

            hours = hours - 12;

        }

        if (seconds < 10) {

            seconds = "0" + seconds;

        }

        if (minutes < 10) {

            minutes = "0" + minutes;

        }

        if (hours < 10) {

            hours = "0" + hours;

        }

        time.textContent = hours + ":" + minutes + ":" + seconds + " " + day_night;

    });

    //]]>

</script>

Trên đây là bài viết hướng dẫn tạo Digital Clock cho blogspot chuyên nghiệp cho blog, một chiếc đồng hồ nhỏ đẹp hiển thị trên blog của các bạn.

Nguồn: codingnepalweb

Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).

Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.

Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.

Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback

Tags: Blog Clock