Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Đồng hồ đọc giờ với JavaScript
URL: https://www.javascriptbank.com/javascript-word-clock-spell-the-time.html
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.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Đồng hồ đọc giờ với JavaScript
URL: https://www.javascriptbank.com/javascript-word-clock-spell-the-time.html
<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><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><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>