ساعة رقميه |
بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
[ ديجتل ] ساعة رقمية احترافيه لموقعك - معربة
هذه الساعة الرقميه هي إضافة للموقع وانا اعتبرها للزينه وزيادة جمال الموقع او المدونة فقط , وكي تخبر الزائر بتوقيت او الوقت , الاضافة تعتمد على الجافا وبعض الاكواد المشغله ايضا تعتمد على توقيت نفس جهاز الكمبيوتر للزائر .صورة :
ساعة رقميه |
طريقة التركيب :
- ادخل مدونتك .
- التخطيط.
- إضافة اداة html/javascript.
- الصق هذا الكود بها :
<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:200px auto 60px;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>
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).