This is the 20th day of my participation in the August Text Challenge.More challenges in August

sequence

It’s time to write your own components again

As a front-end developer, I can write customized components to increase my experience, and I can also quickly develop them through CV

Writing small components, and gradually it becomes writing big components, is a plan

Here’s a preview of the final result:

Let me start with a quick question. Now, which kind of time do you prefer to look at, clock type or number type? (Although your answers won’t stop me from making a clock.)

Clock time:

Digital time:



Neumorphism

I’m not a fan of some of the clock styles on the web right now, but I came across a new animorphism design from Neumorphism and it really struck me as a great idea, so I decided to go with you

Neumorphism style page


The text start

It added a bunch of words to add more text, which was fantastic

Let’s start the component process

One, the clock dial preparation

Since I use VUE, I write.vue components as well

Set up a clock.vue component, and set the width and height that the props might receive, and the shadow color. The shaded parts are set with box-shadow

StyleVar (styleVar, styleVar, styleVar, styleVar, styleVar, styleVar, styleVar

Set the global color to #EBE6DA in the main page app.vue

In CSS style writing, positional equivalents can be calculated using calC plus var

Code: it’s too long, it is suggested that see kongchengji.blog.csdn.net/article/det from here…

Effect:

Two, the clock pointer preparation

Note when writing a pointer that the rotation of the pointer moves around the center of the circle. Use transform to change the rotation

So you need to use transform-origin: bottom to set the selected reference point and rotate to change it

After the style is written, you can combine the current Beijing time with the rotation of the hand, minute hand, and second hand

The principle here is actually simpler: use new Date() to get the current minute and second, and then convert the minute and second to a degree deg

// Calibrate the clock pointer method
currentTime:function(){
    let date = new Date(a);this.hour = date.getHours();
    this.minute = date.getMinutes();
    this.second = date.getSeconds();
    document.getElementsByClassName('hourhand') [0].style.transform = 'rotate(' + this.hour / 24 * 360 + 'deg)';
    document.getElementsByClassName('minhand') [0].style.transform = 'rotate(' + this.minute / 60 * 360 + 'deg)';
    document.getElementsByClassName('sechand') [0].style.transform = 'rotate(' + this.second / 60 * 360 + 'deg)';
}
Copy the code

Run the setInterval timer once for 1000 ms

This can achieve the final desired effect

Three, the clock component call

With the clock component written, you can then make the call on the page

import clock from './components/clock'

export default {
  name: 'App'.components: {
    clock
  }
}
Copy the code

Call
to put the clock where you want because I set up the props, So you can adjust the clock size and color style by simple Settings
color is #bec8e4

These style changes are passed through props, but they can also be passed between other components

Current clock style:




Complete component code

Is too long, see kongchengji.blog.csdn.net/article/det from here…