ساعة رقمية إحترافية بالجافا سكريبت

ساعة رقمية إحترافية بلغة جافا سكريبت بعيداً عن الساعات الفلاشية التي تثقل المدونات هذه الإضافة حصرية لكن مدون وتم عمل مظهرين مختلفين , إضافة أنه تم الحرص برمجياً ان تكون الإضافة سهلة التعامل ويمكن عمل ستايلات لا حصر لها طبعا هذا يرجع لذوقك ومعرفتك بلغة CSS

المظهر الأول

<style type='text/css'>
.cnmuclock {
background-color: #000;
border: 4px solid #eee;
border-radius: 8px;
box-shadow: 0 0 2px #222;
color: #90fe00;
display: block;
font: 68px/80px arial;
height: 80px;
margin: 10px auto;
padding-left: 4px;
padding-right: 30px;
position: relative;
width: 195px;
}
.cnmuclock span {float: left; margin: 0 4px;}
.ceconds {
font-size: 12px;
position: absolute;
right: 7px;
top: -5px;
}
.cspahmsa {
font-size: 12px;
top: 10px;
position: absolute;
right: 5px;
}
.cfasel2 {display: none;}
</style>
<script type='text/javascript'>
//<![CDATA[
var _0x3512=["x41x4D","x67x65x74x48x6Fx75x72x73","x67x65x74x4Dx69x6Ex75x74x65x73","x67x65x74x53x65x63x6Fx6Ex64x73","x72x65x6Ex64x65x72x54x69x6Dx65x28x29","x50x4D","x30","x63x6Ex6Dx75x63x6Cx6Fx63x6B","x67x65x74x45x6Cx65x6Dx65x6Ex74x42x79x49x64","x74x65x78x74x43x6Fx6Ex74x65x6Ex74","x3A","x69x6Ex6Ex65x72x48x54x4Dx4C","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x68x6Fx75x72x73x22x3E","x3Cx2Fx73x70x61x6Ex3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x66x61x73x65x6Cx20x63x66x61x73x65x6Cx31x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x6Dx69x6Ex75x74x65x73x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x66x61x73x65x6Cx20x63x66x61x73x65x6Cx32x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x65x63x6Fx6Ex64x73x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x73x70x61x68x6Dx73x61x22x3E"];function renderTime(){var _0x554cx2= new Date();var _0x554cx3=_0x3512[0];var _0x554cx4=_0x554cx2[_0x3512[1]]();var _0x554cx5=_0x554cx2[_0x3512[2]]();var _0x554cx6=_0x554cx2[_0x3512[3]]();setTimeout(_0x3512[4],1000);if(_0x554cx4==0){_0x554cx4=12}else {if(_0x554cx4>12){_0x554cx4=_0x554cx4-12;_0x554cx3=_0x3512[5]}};if(_0x554cx4<10){_0x554cx4=_0x3512[6]+_0x554cx4};if(_0x554cx5<10){_0x554cx5=_0x3512[6]+_0x554cx5};if(_0x554cx6<10){_0x554cx6=_0x3512[6]+_0x554cx6};var _0x554cx7=document[_0x3512[8]](_0x3512[7]);_0x554cx7[_0x3512[9]]=_0x554cx4+_0x3512[10]+_0x554cx5+_0x3512[10]+_0x554cx6+_0x554cx3;_0x554cx7[_0x3512[11]]=_0x3512[12]+_0x554cx4+_0x3512[13]+_0x3512[14]+_0x3512[10]+_0x3512[13]+_0x3512[15]+_0x554cx5+_0x3512[13]+_0x3512[16]+_0x3512[10]+_0x3512[13]+_0x3512[17]+_0x554cx6+_0x3512[13]+_0x3512[18]+_0x554cx3+_0x3512[13]}renderTime()
//]]>
</script>
<div class='cnmuclock' id='cnmuclock'></div>

تنسيقات

هذا #000 لون خلفية الساعة
هذا #eee لون الإطار
هذا #90fe00 لون الخط

المظهر الثاني

<style type='text/css'>
.cnmuclock {
margin: 10px auto;
width: 258px;
}
.cnmuclock span {
background-color: #000;
box-shadow: 0 10px 10px #777 inset;
color: #fff;
display: inline-block;
float: left;
font: 36px/60px arial;
height: 60px;
margin-right: 4px;
text-align: center;
width: 60px;
border-radius: 2px;
}
.cfasel {display:none !important;}
</style>
<script type='text/javascript'>
//<![CDATA[
var _0x3512=["x41x4D","x67x65x74x48x6Fx75x72x73","x67x65x74x4Dx69x6Ex75x74x65x73","x67x65x74x53x65x63x6Fx6Ex64x73","x72x65x6Ex64x65x72x54x69x6Dx65x28x29","x50x4D","x30","x63x6Ex6Dx75x63x6Cx6Fx63x6B","x67x65x74x45x6Cx65x6Dx65x6Ex74x42x79x49x64","x74x65x78x74x43x6Fx6Ex74x65x6Ex74","x3A","x69x6Ex6Ex65x72x48x54x4Dx4C","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x68x6Fx75x72x73x22x3E","x3Cx2Fx73x70x61x6Ex3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x66x61x73x65x6Cx20x63x66x61x73x65x6Cx31x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x6Dx69x6Ex75x74x65x73x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x66x61x73x65x6Cx20x63x66x61x73x65x6Cx32x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x65x63x6Fx6Ex64x73x22x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x63x73x70x61x68x6Dx73x61x22x3E"];function renderTime(){var _0x554cx2= new Date();var _0x554cx3=_0x3512[0];var _0x554cx4=_0x554cx2[_0x3512[1]]();var _0x554cx5=_0x554cx2[_0x3512[2]]();var _0x554cx6=_0x554cx2[_0x3512[3]]();setTimeout(_0x3512[4],1000);if(_0x554cx4==0){_0x554cx4=12}else {if(_0x554cx4>12){_0x554cx4=_0x554cx4-12;_0x554cx3=_0x3512[5]}};if(_0x554cx4<10){_0x554cx4=_0x3512[6]+_0x554cx4};if(_0x554cx5<10){_0x554cx5=_0x3512[6]+_0x554cx5};if(_0x554cx6<10){_0x554cx6=_0x3512[6]+_0x554cx6};var _0x554cx7=document[_0x3512[8]](_0x3512[7]);_0x554cx7[_0x3512[9]]=_0x554cx4+_0x3512[10]+_0x554cx5+_0x3512[10]+_0x554cx6+_0x554cx3;_0x554cx7[_0x3512[11]]=_0x3512[12]+_0x554cx4+_0x3512[13]+_0x3512[14]+_0x3512[10]+_0x3512[13]+_0x3512[15]+_0x554cx5+_0x3512[13]+_0x3512[16]+_0x3512[10]+_0x3512[13]+_0x3512[17]+_0x554cx6+_0x3512[13]+_0x3512[18]+_0x554cx3+_0x3512[13]}renderTime()
//]]>
</script>
<div class='cnmuclock' id='cnmuclock'></div>

تنسيقات

هذا #000 لون الخلفية
هذا #fff لون الخط
وهذا #777 لون ظل الخلفية العلوي

ملاحظة هامة

ان اردت تركيب الساعة كمجرد نص في القالب من الداخل فقط أضف الكود الازرق فوق الوسم </head>

والكود الأصفر في اى منطقة تريد في القالب

Original Article