Skip to main content

Create a simple Digital Clock for Your website with Javascript.




Create a Unordered list in HTML

You have to create a unordered list using <ul> and</ul> tags in your HTML file. And inside it include 3 <li> elements for Hours, Minutes and Seconds .

ul >
<li id='hours'></li>
<li id = 'minutes'></li>
<li id ='seconds'></li>
</ul>

Write The Script With Javascript

Then you can place your script inside head tags.

<script>
function newfunc() {
a = new Date();
day ="AM"
hours = a.getHours();
if (hours > 12){
hours = hours -12;
day = 'PM'
}
else{
}
document.getElementById("hours").innerHTML = ("0"+hours).slice(-2)+':';
document.getElementById("minutes").innerHTML = ("0"+a.getMinutes()).slice(-2)+':';
document.getElementById("seconds").innerHTML = ("0"+a.getSeconds()).slice(-2)+"&nbsp;"+day;


}
setInterval(newfunc,1000);


Stylise the Unordered List

Add a <style> tag to stylise the <li> elements

<style>
li {
display: inline-block;
font-size: xx-large;
}

</style> 

and add a inline CSS to stylise the Unordered list

<ul style="float:right; ">
<li>Your Current Time &nbsp;</li>
<li id='hours'></li>
<li id = 'minutes'></li>
<li id ='seconds'></li>
</ul>


Then It Looks like this


You Can Simply clone my clock from github

Happy Coding...



Labels:

Comments

Post a Comment

Trending Now

Let's talk about cryptography.

Have you ever heard of cryptography?  People write their diaries every day. For many of them, their diary is one of their best friends to whom they tell their every secret. What happens when someone else finds such a diary? That would freak out the dairy's owner for sure. Also, it might put their lives in danger. Wise men always hide their diaries so no one else finds it.  But legends hide their message so that only they can read what they wrote. So even if the diary is found by someone else, they cannot know the secrets. for example, I wrote this in my diary today.   P dyval h isvn wvza hivba jyfwavnyhwof avkhf Can you understand it? This is just a very primitive level of cryptography yet powerful enough to hide what I wrote from 90% of people. I will discuss this type of cryptography in the next blog post. The human used cryptography from the very beginning to share their messages in secret and conceal their inventions. As you may know, many people tried to find a recip...
Post a Comment
Read more

How to send and receive discord messages with your bot in 2023.

Hello everyone. Welcome back to the Blog of Chamodh today I will show you how to send and receive discord messages with your bot. Before getting started, I remind you that this is the second episode of the series How to make Discord bot in 2023 and if you haven't read the previous one, please read that first as I explain how to create your bot application and add it to a server there. READ:  https://blogofchamodh.blogspot.com/2023/02/how-to-make-your-own-discord-bot-2023.html We don't gonna use virtual environments, IDEs, or any other utility because we can use Replit for our coding purposes.  Let's Get Started. STEP1: Set up Replit It is really simple. Just go to  https://replit.com/~ and sign up if you have never used its service before and create a new Repl. I don't hope to guide you in this as this is an intermediate tutorial. Make sure to select Python as you create the new Repl because we are going to use Python for our back end. STEP 2: Get your token. To run ou...
Post a Comment
Read more