Show an interesting clock on blank pages using JS implementation

Preface

In our daily web browsing, blank pages are often seen as a boring thing, a space waiting to be filled. But sometimes, some simple elements can ignite infinite imagination in this blank space, and even let time stop at that moment. Today we will learn how to use JS to show an interesting clock on a blank webpage.

text

• First we use a simple HTML structure to create the appearance of a clock

    <div class="clock">
    <div class="outer-clock-face">
      <div class="marking marking-one"></div>
      <div class="marking marking-two"></div>
      <div class="marking marking-three"></div>
      <div class="marking marking-four"></div>

      <div class="inner-clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>

    </div>
  </div>

<div class="clock">: This is the container for the entire clock.

<div class="outer-clock-face">: This is the outer ring of the clock.

<div class="marking marking-one"></div>: This is a mark on the outer ring, which may represent a scale of hours or minutes<div class="marking marking-two"></div> <div class="marking marking-three"></div> <div class="marking marking-four"></div> <div class="inner-clock-face">: This is the inner circle of the clock, which is used to place the pointers for hours, minutes and seconds.

<div class="hand hour-hand"></div>: This is the hour hand.

<div class="hand min-hand"></div>: This is the minute hand.

<div class="hand second-hand"></div>: This is the second hand.

This HTML code creates a simple clock appearance structure, but it also requires adding styles through CSS and implementing dynamic effects of the clock through JavaScript.

Since we still need to add JS and CSS styles to achieve dynamic effects, let’s first think about how to use what CSS styles?

• Let's analyze what clock styles are implemented by the following CSS codes?

.clock{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px solid #ffebdb;
    background-image: url('./');
    background-size: 111%;
    padding: 20px;

.clock: This class sets the overall style of the clock, including width, height, border, rounded corners, background image, and fill. In which we fill in the path of the background image we specified in *background-image: url('./');*. If you want to set the background image you want, you can fill in your background image path relative to the current HTML file

    .outer-clock-face{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
  }
  .outer-clock-face::before,
  .outer-clock-face::after{
    content: '';
    width: 10px;
    height: 100%;
    background: #596235;
    display: block;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  .outer-clock-face::after{
    transform: rotateZ(90deg);
    transform-origin: center center;
  }

This code adds style to the outer ring of the clock:

• .outer-clock-face: This class sets the style of the outer ring, including width, height, rounded corners and relative positioning.

• .outer-clock-face::beforeand.outer-clock-face::after: These two pseudo-elements are used to create decorative elements of the outer circle.

  • content: '': This property sets the content of the pseudo-element to be empty.
  • width: 10px; height: 100%;: This sets the width and height of the decorative element so that it is consistent with the height of the outer ring.
  • background: #596235;: This sets the background color of the decorative element.
  • display: block;: This sets the pseudo-element to a block-level element so that it can occupy the full height of the outer ring.
  • border-radius: 8px;: This sets the rounded corners of the decorative element.
  • position: absolute; left: 50%;: This absolutely locates the decorative element relative to the outer ring and centers horizontally.
  • transform: translate(-50%);: This moves the decorative element to the left to the left to achieve horizontal centering.

• .outer-clock-face::after: This pseudo-element defines another decorative element of the outer ring, which gives it the appearance of the clock by rotating it.

  • transform: rotateZ(90deg);: This rotates the decorative element 90 degrees, making it the "3" point position of the clock.
  • transform-origin: center center;: This defines the center point of the rotation as the center point of the decorative element to ensure that the rotation effect is applied correctly.

• After adding a style to the outer ring of the clock, we can define the space-time scale style

     .marking{
    width: 3px;
    height: 100%;
    background: #596235;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transform-origin: center center;
  }
  .marking-one{
    transform: rotateZ(30deg);
  }
  .marking-two{
    transform: rotateZ(60deg);
  }
  .marking-three{
    transform: rotateZ(120deg);
  }
  .marking-four{
    transform: rotateZ(150deg);
  }

• .marking: This class sets the style of the tick, including width, height, background color, absolute positioning, and horizontal centering.

  • width: 3px; height: 100%;: This sets the width and height of the scale so that it occupies the height of the entire clock vertically.
  • background: #596235;: This sets the background color of the scale.
  • position: absolute; left: 50%;: This will absolutely position the scale relative to the outer ring and center horizontally.
  • transform: translate(-50%);: This moves the scale to the left in the horizontal direction by half of its width to achieve horizontal centering.
  • transform-origin: center center;: This defines the center point of the transformation as the center point of the scale to ensure that the transformation effect is applied correctly.

• .marking-one、.marking-two、.marking-threeand.marking-four: These classes are used to define the tick styles at different positions.

  • transform: rotateZ(deg);: This is used to rotate the scale to distribute it at different positions of the clock. For example,.marking-oneThe rotation angle is 30 degrees, indicating that it is at the "1" point of the clock;.marking-twoRotate 60 degrees to indicate that it is at the "2" point position of the clock, and so on.

With these styles, we can add scales on the outer ring of the clock to facilitate the user to read the time

• [ ] Finally, we came to the style of the inner circle style of the clock and the style of the time, minute and second pointers

    .inner-clock-face{
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #ffebdb;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .hand{
    width: 50%;
    height: 6px;
    background: red;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%) rotateZ(90deg);
    transform-origin: 100% center;
  }
  .hour-hand{
    width: 30%;
  }
  .min-hand{
    width: 40%;
    height: 3px;
  }
  .second-hand{
    width: 45%;
    height: 2px;
    background: #b3b3b3;
  }

We define the width and height of the inner circle, background color, etc. in the .inner-clock-face part, and then define the same style of the clock pointer in the .hand part, including width, height, background color, border radius, absolute positioning, horizontal centering and vertical offset.

These styles will give the clock inner circle and pointer an aesthetic and functional look on the page, and the styles of the individual sections are carefully designed to ensure they display the time correctly.

• Finally, we came to the JS part. How to make this clock have a dynamic effect?

    const secondHand = ('.second-hand')
const minHand = ('.min-hand')
const hourHand = ('.hour-hand')

// (secondHand);

function setTime() {
    const now = new Date()

    // Get the current number of seconds    const seconds = () // 30
    const secondsDegrees = seconds * 6 + 90
     = `rotate(${secondsDegrees}deg)`

    // Get score    const mins = () // 40
    const minsDegrees = mins * 6 + 90
     = `rotate(${minsDegrees}deg)`

    // When obtaining    const hour = () // 21
    const hourDegrees = hour * 30 + 90 + (mins / 60) * 30
     = `rotate(${hourDegrees}deg)`
}

setTime()
setInterval(setTime, 1000)

We passedsetTimefunction to update the clock's second hand and usesetIntervalThe function is called once every secondsetTimeFunction to keep the clock updated in real time.

• Added logic for reading minutes and hours, and the corresponding rotation angles are calculated separately.
• existsetTimeThe rotation angles of the minute and hour pointers are updated in the function.
• hoursDegreesIn the calculation,(hours % 12)To ensure that the number of hours does not exceed 12 on the 12-hour system.
• In calculationhoursDegreesWhen, the minute adjustment of the hour hand is considered, so that the hour hand can smoothly transition.

In this article, we create a simple and functional web clock through HTML, CSS, and JavaScript. Through HTML, we define the structure of the clock, including the external and internal clock surfaces as well as time, minute and second pointers. Then, through CSS, we add styles to the clock to make its appearance more beautiful and achieve dynamic rotation of the pointer. Finally, through JavaScript, we obtain the current time and update the position of the time, minute and second pointers according to the time, thus realizing the clock function of real-time update.

Overall, this web clock demonstrates the power of HTML, CSS, and JavaScript, and through their combination we can create a wide variety of interactive and dynamic web elements. Whether it is learning front-end development or simply understanding web technology, this project is a good starting point.

The above is the detailed content of using JS to display an interesting clock on a blank page. For more information about displaying clocks on a blank page of JS, please pay attention to my other related articles!