The effect

No more nonsense, first effect:

The purpose of this small project is to use jquery for some easy writing to paste the whole framework code first

<div class="clock"> <! When -- -- -- ><div class="flipper">
            <div class="gear"></div>
            <div class="gear"></div>
            <div class="top">
                <div class="text">00</div>
            </div>
            <div class="bottom">
                <div class="text">00</div>
            </div>
        </div>
        <!-- 分 -->
        <div class="flipper">
            <div class="gear"></div>
            <div class="gear"></div>
            <div class="top">
                <div class="text">00</div>
            </div>
            <div class="bottom">
                <div class="text">00</div>
            </div>
        </div><! - seconds -- -- ><div class="flipper">
            <div class="gear"></div>
            <div class="gear"></div>
            <div class="top">
                <div class="text">00</div>
            </div>
            <div class="bottom">
                <div class="text">00</div>
            </div>
        </div>
    </div>
Copy the code

Don’t look at this long lump, in fact, is equivalent to only one display hour, the rest of the direct copy (whisper whisper)

The functions that need to be implemented

Based on the renderings above, we can roughly see what we need to do with the clock display

  1. The overall framework
  2. The gradual lumps on either side of the hour
  3. Real-time display time
  4. Dynamic page flipping effect (page flipping according to time change)

Integral peripheral frame

Outermost large box: There is gradient color display (MP4 changed to JIF format and the image quality is worse, but the gradient effect can still be seen) how can we make the box border gradient here? Set the box border shadow with a gradient. That’s exactly right. Box-shadow will solve it

box-shadow: inset 0 -3px 6px 3px rgba(0.0.0.0.2),
              inset 0 4px 8px 3px rgba(0.0.0.0.4),
              0 2px 3px 1px rgba(255.255.255.0.3),
              0 -2px 4px 4px rgba(56.56.61.0.5);
Copy the code

The four corners of the outermost box are also slightly radian:

 border-radius: var(--radius);// Set a variable to increase maintainability, and then directly modify the value of the variable, no need to look around
Copy the code

The whole frame looks like this (ignoring the six eggs inside, which are the initial values in the div box).

The gradual lumps on either side of the hour

So that’s the outer frame, and now let’s look at the big box that looks like this

You might say this is not the same as the frame of the outermost frame. It’s basically the same, but there are subtle differences. Look closely, see if it has a concave feeling, the top and bottom sides pop out, which is actually similar to the box shadow.

.top, .bottom{
  box-shadow: 0 6px 6px 1px rgba(0.0.0.0.5),
              0 2px 2px 1px rgba(255.255.255.0.15);
  border-top: 2px solid rgb(102.103.110);/ / frame
  border-bottom: 2px solid #000;
}
Copy the code

So it looks something like this

Now also missing each side of that what (I also don’t know how to call them….) Let’s analyze it

  1. A gradient
  2. It’s a bit of a stereo effect.
  3. The outer border also has stroke bold
.gear{
  position: absolute;
  top: calc(var(--clockheight) / 3);
  width: 12px;
  height: calc(var(--clockheight) / 3);
  background: linear-gradient(/ / the gradient
    to bottom,
    #000000 0# %,666666 17%,
    #7f7f7f 52%,
    #7f7f7f 52%,
    #0c0c0c 53# %,595959 87# %,131313 100%); outline: 3px solid #000;// Stroke bold
  z-index: 99;
  transform-style: preserve-3d;
  transform: translateZ(10px);// Move 10px in the Z direction
  perspective: 0;
}
Copy the code

It’s a lot better to look at now

Real-time display time

Get the initial value of the container (the six eggs)

myhour = $('.clock .flipper:nth-child(1) div:not(.new) .text')// This is where jquery is used
  myminute = $('.clock .flipper:nth-child(2) div:not(.new) .text')/ / to find points
  mysecond = $('.clock .flipper:nth-child(3) div:not(.new) .text') / / find the seconds
Copy the code

Acquiring time is simple. It’s direct

var date = new Date(a);Copy the code

It is indeed such and then is the time is divided into hours and minutes and seconds respectively implanted into each part, and then also think ah, looking at the figure, think ah think…. What if there was only one? 01, 02, 03… It’s like that, so it’s not going to work to take the structure and put the numbers in. We need to make a simple decision about whether it’s a digit or a tens digit

To get the time

var date = new Date(a);// Get the current time
    var seconds = date.getSeconds().toString();  // Get the second number without the length attribute
    // Divide time into hours and seconds
    if(seconds.length == 1) {// If toString() is not used
        seconds = '0' + seconds;
    }

    var minutes = date.getMinutes().toString();
    if(minutes.length == 1){
        minutes = '0' + minutes;
    }
    var hour = date.getHours();
    if(hour > 12){
        hour = hour -12;
    }
    if(hour == 0){
        hour = 12;
    }

    hour = hour.toString();  // Convert hour to a string
    if(hour.length == 1){
        hour = '0' + hour;
    }
Copy the code

Here’s the code for setting the time in the DOM (setTime())

Now that you’ve got those minutes, it’s time to think about putting them in place. Rendering and flip effect, when down, if turn off the page, if only one layer, it is not possible to time display shows so smooth, so we need to turn down the pages into div to smooth the change of time, then change only change the corresponding hierarchy is smooth

Implantation of time

// Insert the time into the text
function flipNumber(el,newnumber){/ / el representative flipper
    var thisTop =el.find('.top').clone();    Clone clone native JS el.getelemntByclassName ('top').clone() is the same as el.find('.top')
    var thisBottom =el.find('.bottom').clone();
    thisTop.addClass('new');  // Add class name in jquery JS
    thisBottom.addClass('new');
    thisBottom.find('.text').text(newnumber);// Change the contents of test to the contents of newnumber

    el.find('.top').after(thisTop)  // Find the top thisTop box
    el.find('.top.new').append(thisBottom)// Add thisBottom to the box that also has the.top.new class name
    el.addClass('flipping')// Add an flipping class name to el(flipper)
    // el.find('.top.new').find('.text').text(newnumber);
    el.find('.top:not(.new)').find('.text').text(newnumber);// Find top where there is no new class name and assign newnumber to text in top
    setTimeout(function () {
    el.find('.bottom:not(.new)').find('.text').text(newnumber);
    }, 500)// There is time to turn the page, so 500ms display
}
Copy the code

I can’t really see what the box looks like here (don’t worry)

So we’ve done most of the work here. Now there’s only one flip effect left and a real time display

Dynamic page flipping effect (page flipping according to time change)

Turn the page

We use CSS animation to turn the page

@keyframes rotate {
  0% {
    /* rotate the default is Z */
    transform: rotateX(0deg) translateY(0px);
    
  }
  100% {
    transform: rotateX(-180deg) translateY(-10px); }}Copy the code

Real-time display time

Real-time display is nothing more than a loop

setTimeout(function () {
    setTime();
    }, 500);
Copy the code

Take a closer look at the renderings, we will find that there is some delay change in the second half (although the code for this part has been posted above, I just want to post it again, just so capricious).

el.find('.bottom:not(.new)').find('.text').text(newnumber);
    }, 500)// There is time to turn the page, so 500ms display
Copy the code

Now the time display of the upper part is left. As we mentioned above, it is impossible to change the time so smoothly if there is only one DIV in the page-turning part, so this part must be multiple boxes, one shows the time of the upper part and the other shows the time of the lower part. When flipping, We just need to change the relationship between them (I set transparency here, so I just need to change transparency) and use CSS animation

@keyframes rotatebottom{
  0% {
    opacity: 0;/ / transparency
  }

  49% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1; }}Copy the code

And the last thing to think about is the loop shows (this is a recursive operation)

setTimeout(function () {
    setTime();// Set the time in dom
    }, 500);
Copy the code

The last step is also the most critical ！！！！！ Because we created several divs when we were embedding time, if we didn’t delete the div we created during recursion (we would have created countless div’s) and then burst. So we need to delete the div we created

$(".flipper").removeClass("flipping");// Find the class name flipper and remove the class name
    $(".flipper .new").remove();// Find the new box under flipper and delete it
Copy the code

So here we have the renderings for the presentation.

Source code has been uploaded to Gitee, there is a need to download the EU

Gitee.com/zhu-yongtao…