Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use html, css and js to make cool black analog clock, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

Simple analog clock using HTML, CSS, and JavaScript

I hope you like this design. I share a complete tutorial on how to do this design below. I hope the following tutorial will help you.

To do this, first, you must create a HTML and CSS file.

Step 1: create the basic structure of the clock

This HTML code is basically the basic structure of the analog clock. I used some CSS code to design the background and shape of this watch. As you can see in the image above, it takes the form of a new form design. Here, I use CSS code to implement the Neumorphism design.

As you can see in the above demonstration, I used a border around the watch to make the code border: 7px solid # 282828. I use box-shadow to make it clearer. Border-radius 50% makes this watch round. I also used a height and width of 30 rem. If you want to make this watch bigger, you can increase its size.

HTML

CSS

Html {background: # 282828; text-align: center; font-size: 10px;} body {margin: 0; font-size: 2remt; display: flex; flex: 1; min-height: 100vh; align-items: center;}. Clock {width: 30remt; height: 30remt; border: 7px solid # 282828 Box-shadow:-4px-4px 10px rgba, inset 4px 4px 10px rgba, inset-4px-4px 10px rgba, 4px 4px 10px rgba; border-radius: 50%; margin: 50px auto; position: relative; padding: 2 remand;}

Demonstration effect

Step 2: Mark 1 to 12 on the clock

HTML

CSS

.outer-clock-face {position: relative; width: 100%; height: 100%; border-radius: 100%; background: # 282828; overflow: hidden;} .outer-clock-face::after {- webkit-transform: rotate (90deg);-moz-transform: rotate (90deg); transform: rotate (90deg)} .outer-clock-face::before,.outer-clock-face::after,.outer-clock-face. Processes {content:'; position: absolute; width: 5px Height: 100%; background: # 1df52f; z-index: 0; left: 49%;}

Demonstration effect

CSS

.outer-clock-face .circle {background: # bdbdcb; width: 3px;} .outer-clock-face. Marking.marking-one {transform: rotate (30deg)} .outer-clock-face. Marking.marking-two {transform: rotate (60deg)} .outer-clock-face. Marking.marking-three {transform: rotate (120deg)} .outer-clock-face. Marking.marking-four {transform: rotate (150deg)}

Demonstration effect

I used the following HTML and CSS code to make a circle. As a result, the middle of the long line is covered, and it has a full size of 1 to 12 markers.

HTML:

CSS

.inner-clock-face {position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: # 282828;-webkit-border-radius: 100%;-moz-border-radius: 100%; border-radius: 100%; z-index: 1;} .inner-clock-face::before {content:''; position: absolute; top: 50%; border-radius: 18px; margin-left:-9px Margin-top:-6px; left: 50%; width: 16px; height: 16px; background: # 4d4b63; z-index: 11;}

Demonstration effect

Step 3: make three pointers to indicate the time

In this cell, I use three hands, which are made using the following HTML and CSS code.

HTML

CSS

.hand {width: 50%; right: 50%; height: 6px; background: # 61afff; position: absolute; top: 50%; border-radius: 6px; transform-origin: 100%; transform: rotate (90deg); transition-timing-function: cubic-bezier (0.1,2.7,0.58,1);}. Hand.hour-hand {width: 30%; z-index: 3;}. Hand.min-hand {height: 3px; z-index: 10 Width: 40%;}. Hand.second-hand {background: # ee791a; width: 45%; height: 2px;}

Demonstration effect

Step 4: activate the clock using JavaScript code

We have designed the whole watch above, but this watch has no function yet. This means that the hands of the watch do not have any function and do not show the exact time. To do this, we need to use JavaScript code.

Using the JavaScript below, I have given instructions on how to rotate these hands. If you know the basic JavaScript, you will certainly understand it.

I have fully explained how this JavaScript code works below.

JavaScript

Const secondHand = document.querySelector ('.second-hand'); const minsHand = document.querySelector (' .min-hand'); const hourHand = document.querySelector ('.hour-hand')

JavaScript

Function setDate () {const now = new Date (); const seconds = now.getSeconds (); / / second hand rotation const secondsDegrees = ((seconds/60) * 360) + 90; secondHand.style.transform = `rotate (${secondsDegrees} deg) `; const mins = now.getMinutes (); / / minutes hand rotation const minsDegrees = ((mins / 60) * 360) + ((seconds/60) * 6) + 90; minsHand.style.transform = `rotate (${minsDegrees} deg)` Const hour = now.getHours (); / / Hours hand rotation const hourDegrees = ((hour / 12) * 360) + ((mins/60) * 30) + 90; hourHand.style.transform = `rotate (${hourDegrees} deg) `;} JavaScript code details

About the second hand

JavaScript

Const seconds = now.getSeconds (); / / second hand rotationconst secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate (${secondsDegrees} deg) `

I have stored how the second hand rotates in secondsDegrees, and then I use rotate (${secondsDegrees} deg) to rotate the second hand 1 minute equals 60 seconds, so the circle I divide by 60 circles is 360 degrees, so I multiply it by 360.

About the minute hand

JavaScript

Const mins = now.getMinutes (); / / minutes hand rotationconst minsDegrees = ((mins / 60) * 360) + ((seconds/60) * 6) + 90; minsHand.style.transform = `rotate (${minsDegrees} deg) `

I stored the pointer on how to rotate the minute in minsDegrees, and then I used (${minsDegrees] deg) to rotate the minute hand for one hour equals 60 minutes, so I divided by 60 and added the second hand position with minutes. Because the minute hand in the right position depends on the second.

JavaScript

SetInterval (setDate, 1000); setDate ()

Thank you for reading this article carefully. I hope the article "how to make a cool black analog clock with html, css and js" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.