这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

序

又到了自己编写组件的时节了

作为一名前端开发者，平时也是阔以没事可以写写自定义的组件，增加一下自己的阅历，实际开发中用到也可以通过CV大法去快速开发

编写一些小的组件，然后一步一步就会变成编写大组件了，简直计划通

先提前来看一下最终的效果：

先问一个小问题，现在大家现在更习惯于看哪种样式的时间，是钟表类型还是数字类型？（虽然你们的回答影响不了我做一个钟表啦）

钟表时间：

数字时间：

Neumorphism

目前网上的一些时钟风格不太喜欢，之前偶然看到一款新拟物风格Neumorphism的设计，让我眼前不禁一亮 所以本次时钟组件的风格就决定是你啦---新拟物

Neumorphism风格页面

正文开始

上面又水了一堆话，增加了一下文字的数量，真是太开森了

下面正式开始组件的制作流程

一、时钟表盘编写

因为本人使用的是vue，所以编写的也是.vue组件

先搭建一个clock.vue的组件，设定好props可能会接收的宽高，还有阴影颜色。 阴影部分使用box-shadow进行设置

其中像Compute中的styleVar内容类似于CSS 中的:root 也可以去此文章中查看相关方法：自己动手丰衣足食系列の自定义下拉框 vue 组件

在主页面app.vue中设置全局颜色为#EBE6DA

在CSS 样式编写中，计算位置等值可以使用calc加var的方式计算

代码： 太长了，建议从这里看 kongchengji.blog.csdn.net/article/det…

效果：

二、时钟指针编写

在编写指针时需要注意，指针的旋转运动是围绕圆心进行的，使用transform来改变旋转

所以需要使用transform-origin: bottom来设置选择的基准点，之后旋转rotate改变

在样式编写完成之后，就可以将当前的北京时间与指针、分针、秒针的转动相结合起来了

这里的原理其实更加简单，使用new Date()获取到当前的时分秒，然后再将时分秒按比例转换成度数deg

// 校准时钟指针方法
currentTime:function(){
    let date = new Date();
    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)';
}

使用setInterval定时器定时1000毫秒执行一次

这样就可以达到最终想要的效果了

三、时钟组件的调用

编写好时钟组件后，接下来就可以在页面上进行调用了

import clock from './components/clock'

export default {
  name: 'App',
  components: {
    clock
  }
}

调用<clock></clock>就能够将时钟放置到你想要的位置 因为之前设置了props的原因，所以可以通过简单的设置调整时钟的大小和颜色风格 <clock :bgsize="150" :bgcolor=color></clock> color为#bec8e4

这些样式的改变都是通过props来进行传递，当然也可以通过其他组件间传值的方式来进行改变

现在的时钟样式：

完整组件代码

太长了，从这里看 kongchengji.blog.csdn.net/article/det…