« »

Một đồng hồ báo giờ tuyệt nhất trên trang web tôi từng thấy bằng JavaScript, mặc dù hiệu ứng báo giờ này chỉ thay đổi mỗi năm phút nhưng nó có cách hoạt động và báo giờ cực kì độc đáo: hiển thị hoàn toàn bằng từ ngữ mà không có bất kì con số nào.

Nhãn: đồng hồ đọc giờ, báo giờ, năm phút, hoạt động, độc đáo, từ ngữ

For the best in Cable TV, High Speed Internet & Home Phone Service order Comcast Deals and save money.

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
CSS
JavaScript
HTML
In

Copy All x2

<style>
        body {
            background-color: #111;
        }
        div#clock {
            font-size: 50px;
            font-family: monospace;
            color: #222;
            text-align: center;
        }
        
        .lightup {
            color: #EEE;
        }
        
        .seclightup {
            color: #EEE;
        }
        
        .gumuz {
            color: #333;
        }
    </style>

Copy All x2

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3.2");     
        google.setOnLoadCallback(function() {
            function render_time(classes) {
                // reset
                $('span').removeClass('lightup');
                //toggle_sec();
                
                for (var i in classes) {
                    $(classes[i]).addClass('lightup');
                }
            }
            
            function toggle_sec() {                
                if ($('.sec').hasClass('seclightup')) {
                    $('.sec').removeClass('seclightup')
                } else {
                    $('.sec').addClass('seclightup')
                }
            }
            
            function check_time() {
                var classes = ['.it_is']
                
                toggle_sec();
                
                var date = new Date();
                var hours = date.getHours()%12;
                if (hours==0) hours = 12;
                var minutes = date.getMinutes()-(date.getMinutes()%5);
                if (date.getMinutes()%5 > 2) minutes = minutes + 5;
                if (minutes == 60) { minutes = 0; hours = hours+1;}
                
                // stupid switch logic...
                if (minutes == 0) {
                    // o'clock!
                    classes.push('.'+hours);
                    classes.push('.oclock');
                } else if (minutes == 30) {
                    // half past
                    classes.push('.'+hours);
                    classes.push('.half');
                    classes.push('.past');
                } else if (minutes == 15) {
                    // quarter past
                    classes.push('.'+hours);
                    classes.push('.past');
                    classes.push('.quarter');
                } else if (minutes == 45) {
                    // quarter to
                    if (hours==12) hours = 0;
                    classes.push('.'+(hours+1));
                    classes.push('.quarter');
                    classes.push('.to');
                } else if (minutes < 30) {
                    // X past
                    classes.push('.'+hours);
                    classes.push('.'+minutes+'to');
                    classes.push('.past');
                    classes.push('.minutes');
                } else if (minutes > 30) {
                    // X to
                    if (hours==12) hours = 0;
                    classes.push('.'+(hours+1));
                    classes.push('.'+(60-minutes)+'to');
                    classes.push('.to');
                    classes.push('.minutes');
                }
                
                render_time(classes);
                
            }
            
            setInterval(check_time, 1000);
      });
</script>

Copy All x2

<div id="clock">
        <span class="it_is lightup">it</span>r<span class="it_is lightup">is</span>u<span class="half">half</span><span class="10to 10past">ten</span><br>
        <span class="quarter">quarter</span><span class="20to 25to lightup">twenty</span><br>

        <span class="25to 5to">five</span>q<span class="minutes lightup">minutes</span>t<br>
        <span class="past lightup">past</span>gumuz<span class="to">to</span>ne<br>
        <span class="1">one</span>n<span class="2">two</span>z<span class="3">three</span><br>

        <span class="4">four</span><span class="5">five</span><span class="7">seven</span><br>
        <span class="6">six</span><span class="8 lightup">eight</span>y<span class="9">nine</span><br>
        <span class="10">ten</span><span class="11">eleven</span><span class="sec">Ã¢â�¢Â¥</span>sec<br>

        <span class="12">twelve</span><span class="oclock">o'clock</span><br>
    </div>