TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

Weebly এর জন্য সহজ ডিজিটাল ক্লক উইজেট

1

আমাদের আগের প্রবন্ধে, আমরা ব্যাখ্যা করেছি কিভাবে HTML5 ক্যানভাস জাভাস্ক্রিপ্ট দিয়ে এনালগ স্টাইলের ঘড়ি তৈরি করতে হয়Weebly সাইটের জন্য একটি সহজ ডিজিটাল ঘড়ি উইজেট তৈরি করা যাক । উইজেটটি আপনার কম্পিউটারের ঘড়ি থেকে সময় পাবে এবং ঘন্টা, মিনিট এবং সেকেন্ডে সময় প্রদর্শন করবে। নীচে উইজেটটি দেখতে কেমন হবে।

উইজেটটিতে সিএসএস, জাভাস্ক্রিপ্ট এবং এইচটিএমএল অংশ রয়েছে এবং আমরা একে একে বিস্তারিতভাবে ব্যাখ্যা করব।

ডিজিটাল ঘড়ির জন্য জাভাস্ক্রিপ্ট

আপনার কম্পিউটারের ঘড়ি থেকে ঘন্টা, মিনিট এবং সেকেন্ড পাওয়ার স্ক্রিপ নিচে দেওয়া হল। উইজেটের কাজ করার জন্য প্রথম স্ক্রিপ্ট লাইন হল স্ক্রিপ্ট jQuery লাইব্রেরি লিঙ্ক।

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script>

দ্রষ্টব্য: যদি স্ক্রিপ্ট আপনার Weebly সাইটে কাজ না করে, তাহলে $ পরিবর্তনশীলকে jQuery দিয়ে প্রতিস্থাপন করুন এবং সাইটটি আবার প্রকাশ করুন।

উইজেটের জন্য CSS

CSS এর তিনটি ক্লাস আছে – .time, .clock এবং .align। ".Time" শ্রেণীটি ঘড়ির সংখ্যাগুলিকে সারিবদ্ধ করতে ব্যবহৃত হয় যখন ".Clock" শ্রেণীটি ঘড়ির স্টাইল সেটআপ করতে ব্যবহৃত হয়।

<style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style>

উইজেটের জন্য HTML

নিচে উইজেটের HTML কোড দেওয়া হল:

<div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div>

কোলন: ঘন্টা, মিনিট এবং সেকেন্ডের মধ্যে বিভাজক হিসাবে ব্যবহৃত হয়।

ডিজিটাল ক্লক উইজেটের জন্য সম্পূর্ণ কোড

স্ক্রিপ্ট, CSS এবং HTML একসাথে যোগ করে সম্পূর্ণ উইজেটটি নীচের মত দেখাবে।

<html> <head> <style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style> </head> <body> <div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script> </body> </html>

উইবেলি সাইটে উইজেট tingোকানো

আপনার Weebly সাইটে ডিজিটাল ক্লক উইজেট toোকানোর অনেক উপায় আছে।

উইজেট কাস্টমাইজ করা

আপনার প্রয়োজন অনুসারে উইজেটটি কাস্টমাইজ করতে নিম্নলিখিত CSS বৈশিষ্ট্যগুলি সামঞ্জস্য করুন:

  • "Darkslateblue" কে "background-color: darkslateblue;" এ পরিবর্তন করে পটভূমির রঙ পরিবর্তন করুন।
  • "রঙ: #fff;" পরিবর্তন করে সংখ্যার রঙ পরিবর্তন করুন ".time" শ্রেণীর অধীনে সম্পত্তি।
  • "Color: #fff;" দিয়ে বিভাজকের রঙ পরিবর্তন করুন ".Clock" ক্লাসের অধীনে।
  • ফন্টের ওজন, মার্জিন এবং ফন্টের আকার ".align" শ্রেণীর বৈশিষ্ট্যগুলির সাথে সামঞ্জস্য করা যেতে পারে।

নীচে বিভিন্ন রঙের বৈচিত্র সহ ডিজিটাল ঘড়ির কয়েকটি উদাহরণ দেওয়া হল। এমবেড কোড এলিমেন্ট ব্যবহার করে ঘড়িগুলি ওয়েবেলি সাইটে পাশাপাশি রাখা হয়। আপনি Weebly সাইটে ডিজিটাল ঘড়ি ডেমো দেখতে পারেন এখানে

Weebly এর জন্য সহজ ডিজিটাল ক্লক উইজেট

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত