ব্লগে জুড়ে নিন অসাধারন একটি বাংলা ডিজিটাল ঘড়ি - JS Clock Bangla

আসসালামু আলাইকুম,
কেমন আছেন পাঠক? ব্লগ যেহেতু, আপনাকে আমাকে পাঠক বলেই সম্বোধন করতে হবে।
যাদের নিজেদের ওয়েবসাইট বা ব্লগ আছে, সেটা ইংরেজি ভাষায় হলে দেখুন এবং সেটা যদি বাংলা ভাষায় হয়, তবে পূর্ণ মনোযোগে দেখুন :v

কেমন হয় যদি বাংলা ব্লগে সিয়াম রুপালি ফন্টে সিএসএস ডিজাইন করা আবার এনিমেশন সহ ডিজিটাল ঘড়ি লাগিয়ে নেওয়া যায়? সবই সম্ভব। 

একটা ছোট্ট জাভাস্ক্রিপ্ট ঘড়ির উপর কিছু সিএসএস দিতেই অসাধারন হয়ে গেল :)
বাংলা ফন্টের জন্য অবশ্য আমাকে আলাদা করে ফন্ট অনলাইনে হোস্ট করে নিতে হয়েছে।

ডেমোঃ
বাংলা

কোডঃ ইংরেজি জাভাস্ক্রিপ্ট ঘড়ি


<div id="jsclock">
Javascript Clock Cannot Be Displayed, Maybe The Browser is Outdated or Javascript is Disabled. Use Chrome or Opera or Enable Javascript from settings.
</div>
<script type="text/javascript">
// JSClock English
// English clock for blog and website
// coded by 4urThoH1N fb.com/tawsif.torabi
// blog.grplusbd.net
function c2hvdzI(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("jsclock"): document.all.jsclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var ampm="PM"

if (hours<12)
ampm="AM"

if (hours>12)
hours=hours-12
if (hours==0)
hours=12

if (minutes<=9)
minutes="0"+minutes

if (seconds<=9)
seconds="0"+seconds

var ctime= hours+":"+minutes+":"+seconds+" &nbsp;"+ampm;



thelement.innerHTML="<div class='jsclock'><b class='jsclock' id='Aurthi'><div class='js-fade fade-in '>"+ctime+"</div></b></br><a href='http://blog.grplusbd.net' style='text-decoration:none; padding: 10px 5px;color:green; font-size:14px;'>JSClock by GR+</small></div>"

setTimeout("c2hvdzI()",1000)
}
window.onload= c2hvdzI();
</script>
<style type="text/css">
div.jsclock{
border-radius:6px;
width: 98%;
padding: 10px 5px;
background-image: linear-gradient(#00e005,#0e4e00);
box-shadow: 2px 3px 16px black;
text-align: center;
background-color: green;
transition: all 0.5s;
}
b.jsclock{
font-weight: bold;
color:white;
font-family: Utsaah;
font-size:25px;
padding: 10px 5px;
text-shadow:0px -1px 0px black;
transition: all 0.5s;
}

@-webkit-keyframes fadeIn {
to {
opacity: 1;
}
}

@keyframes fadeIn {
to {
opacity: 3;
}
}

.fade-in {
animation: fadeIn 0.4s ease-in 1 forwards;
opacity: 0;
}
</style>


কোডঃ বাংলা জাভাস্ক্রিপ্ট ঘড়ি

<div id="jsclock">
Javascript Clock Cannot Be Displayed, Maybe The Browser is Outdated or Javascript is Disabled. Use Chrome or Opera or Enable Javascript from settings.
</div>
<script type="text/javascript">
// JSClock Bangla
// bangla clock for blog and website
// coded by 4urThoH1N fb.com/tawsif.torabi
// blog.grplusbd.net
function c2hvdzI(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("jsclock"): document.all.jsclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var ampm="wc.Gg"
if (hours<12)
ampm="G.Gg"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime= hours+":"+minutes+":"+seconds+" &nbsp;"+ampm

thelement.innerHTML="<div class='jsclock'><b class='jsclock' id='Aurthi'><div class='js-fade fade-in '>"+ctime+"</div></b></br><a href='http://blog.grplusbd.net' style='text-decoration:none; padding: 10px 5px;color:green; font-size:14px;'>JSClock by GR+</small></div>"
setTimeout("c2hvdzI()",1000)
}
window.onload= c2hvdzI();
</script>
<style type="text/css">
div.jsclock{
border-radius:6px;
width: 98%;
padding: 10px 5px;
background-image: linear-gradient(#00e005,#0e4e00);
box-shadow: 2px 3px 16px black;
text-align: center;
background-color: green;
user-select: none;
}
b.jsclock{
font-weight: bold;
color:white;
font-family: Siyam Rupali ANSI;
font-size:25px;
padding: 10px 5px;
text-shadow:0px -1px 0px black;
user-select: none;
}
@font-face {
  font-family: 'Siyam Rupali ANSI';
  src: url(https://googledrive.com/host/0Bz8X6FgnifH3Qm1NMW92OFNPdG8/);
}
@keyframes fadeIn {
  to {
    opacity: 3;
  }
}
.fade-in {
  animation: fadeIn 0.4s ease-in 1 forwards;
  opacity: 0;
}
</style>

শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট