كود:
<div id="clock" class="light">
<div class="display">
<div class="weekdays"></div>
<div class="ampm"></div>
<div class="alarm"></div>
<div class="digits"></div>
</div>
</div>
<!-- JavaScript Includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://jetara.googlecode.com/svn/trunk/moment.min.js"></script>
<script>
$(function(){var clock=$('#clock'),alarm=clock.find('.alarm'),ampm=clock.find('.ampm');var digit_to_name='zero one two three four five six seven eight nine'.split(' ');var digits={};var positions=['h1','h2',':','m1','m2',':','s1','s2'];var digit_holder=clock.find('.digits');$.each(positions,function(){if(this==':'){digit_holder.append('<div class="dots">')}else{var pos=$('<div>');for(var i=1;i<8;i++){pos.append('<span class="d'+i+'">')}digits[this]=pos;digit_holder.append(pos)}});var weekday_names='الإثنين الثلاثاء الأربعاء الخميس الجمعة السبت الأحد'.split(' '),weekday_holder=clock.find('.weekdays');$.each(weekday_names,function(){weekday_holder.append('<span>'+this+'</span>')});var weekdays=clock.find('.weekdays span');(function update_time(){var now=moment().format("hhmmssdA");digits.h1.attr('class',digit_to_name[now[0]]);digits.h2.attr('class',digit_to_name[now[1]]);digits.m1.attr('class',digit_to_name[now[2]]);digits.m2.attr('class',digit_to_name[now[3]]);digits.s1.attr('class',digit_to_name[now[4]]);digits.s2.attr('class',digit_to_name[now[5]]);var dow=now[6];dow--;if(dow<0){dow=6}weekdays.removeClass('active').eq(dow).addClass('active');ampm.text(now[7]+now[8]);setTimeout(update_time,1000)})();$('a.button').click(function(){clock.toggleClass('light dark')})});
</script>
<!-- The main CSS file -->
<style>*{margin:0;padding:0;}#clock{font:12px tahoma;width:370px;padding:40px;margin:20px auto;position:relative;}#clock:after{content:'';position:absolute;width:400px;height:20px;border-radius:100%;left:50%;margin-left:-200px;bottom:2px;z-index:-1;}#clock .display{text-align:center;padding:40px 20px 20px;border-radius:6px;position:relative;height:54px;}#clock.light{direction: ltr;
text-align: left;background-color:#f3f3f3;color:#272e38;}#clock.light:after{box-shadow:0 4px 10px rgba(0,0,0,0.15);}#clock.light .digits div span{background-color:#272e38;border-color:#272e38;}#clock.light .digits div.dots:before,#clock.light .digits div.dots:after{background-color:#272e38;}#clock.light .alarm{background:url('https://lh3.googleusercontent.com/-Xg0nyEaj4os/Uwj3KOi36TI/AAAAAAAAGGU/QElQhcu4BM8/s16-no/alarm_light.jpg');}#clock.light .display{background-color:#dddddd;box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;}#clock.dark{background-color:#272e38;color:#cacaca;}#clock.dark:after{box-shadow:0 4px 10px rgba(0,0,0,0.3);}#clock.dark .digits div span{background-color:#cacaca;border-color:#cacaca;}#clock.dark .alarm{background:url('https://lh4.googleusercontent.com/-_Lk9J7Py4MA/Uwj3KIS4gQI/AAAAAAAAGGI/2Y1a0pOLsLA/s16-no/alarm_dark.jpg');}#clock.dark .display{background-color:#0f1620;box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;}#clock.dark .digits div.dots:before,#clock.dark .digits div.dots:after{background-color:#cacaca;}#clock .digits div{text-align:left;position:relative;width:28px;height:50px;display:inline-block;margin:0 4px;}#clock .digits div span{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;position:absolute;transition:0.25s;}#clock .digits div span:before,#clock .digits div span:after{content:'';position:absolute;width:0;height:0;border:5px solid transparent;}#clock .digits .d1{height:5px;width:16px;top:0;left:6px;}#clock .digits .d1:before{border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}#clock .digits .d1:after{border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}#clock .digits .d2{height:5px;width:16px;top:24px;left:6px;}#clock .digits .d2:before{border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}#clock .digits .d2:after{border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}#clock .digits .d3{height:5px;width:16px;top:48px;left:6px;}#clock .digits .d3:before{border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}#clock .digits .d3:after{border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}#clock .digits .d4{width:5px;height:14px;top:7px;left:0;}#clock .digits .d4:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}#clock .digits .d4:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}#clock .digits .d5{width:5px;height:14px;top:7px;right:0;}#clock .digits .d5:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}#clock .digits .d5:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}#clock .digits .d6{width:5px;height:14px;top:32px;left:0;}#clock .digits .d6:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}#clock .digits .d6:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}#clock .digits .d7{width:5px;height:14px;top:32px;right:0;}#clock .digits .d7:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}#clock .digits .d7:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}#clock .digits div.one .d5,#clock .digits div.one .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.two .d1,#clock .digits div.two .d5,#clock .digits div.two .d2,#clock .digits div.two .d6,#clock .digits div.two .d3{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.three .d1,#clock .digits div.three .d5,#clock .digits div.three .d2,#clock .digits div.three .d7,#clock .digits div.three .d3{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.four .d5,#clock .digits div.four .d2,#clock .digits div.four .d4,#clock .digits div.four .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.five .d1,#clock .digits div.five .d2,#clock .digits div.five .d4,#clock .digits div.five .d3,#clock .digits div.five .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.six .d1,#clock .digits div.six .d2,#clock .digits div.six .d4,#clock .digits div.six .d3,#clock .digits div.six .d6,#clock .digits div.six .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.seven .d1,#clock .digits div.seven .d5,#clock .digits div.seven .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.eight .d1,#clock .digits div.eight .d2,#clock .digits div.eight .d3,#clock .digits div.eight .d4,#clock .digits div.eight .d5,#clock .digits div.eight .d6,#clock .digits div.eight .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.nine .d1,#clock .digits div.nine .d2,#clock .digits div.nine .d3,#clock .digits div.nine .d4,#clock .digits div.nine .d5,#clock .digits div.nine .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.zero .d1,#clock .digits div.zero .d3,#clock .digits div.zero .d4,#clock .digits div.zero .d5,#clock .digits div.zero .d6,#clock .digits div.zero .d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .digits div.dots{width:5px;}#clock .digits div.dots:before,#clock .digits div.dots:after{width:5px;height:5px;content:'';position:absolute;left:0;top:14px;}#clock .digits div.dots:after{top:34px;}#clock .alarm{width:16px;height:16px;bottom:20px;background:url('https://lh3.googleusercontent.com/-Xg0nyEaj4os/Uwj3KOi36TI/AAAAAAAAGGU/QElQhcu4BM8/s16-no/alarm_light.jpg');position:absolute;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20);opacity:0.2;}#clock .alarm.active{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .weekdays{font-size:12px;position:absolute;width:100%;top:10px;left:0;text-align:center;}#clock .weekdays span{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20);opacity:0.2;padding:0 10px;}#clock .weekdays span.active{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock .ampm{position:absolute;bottom:20px;right:20px;font-size:12px;}</style>
