三步教你编写一个Neumorphism风格的小时钟

序

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

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

通过CV大法去快速开发

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

先问一个小问题，现在大家现在更习惯于看哪种样式的时间，是钟表类型还是数字类型？（

虽然你们的回答影响不了我做一个钟表啦

）

钟表时间：

数字时间：

Neumorphism

目前网上的一些时钟风格不太喜欢，之前偶然看到一款新拟物风格Neumorphism的设计，让我眼前不禁一亮

所以本次时钟组件的风格就决定是你啦—

新拟物

Neumorphism风格页面

正文开始

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

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

一、时钟表盘编写

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

先搭建一个clock.vue的组件，设定好props可能会接收的宽高，还有阴影颜色。

阴影部分使用box-shadow进行设置

其中像Compute中的styleVar内容类似于CSS 中的:root

也可以去此文章中查看相关方法：自己动手丰衣足食系列の自定义下拉框 vue 组件

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

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

代码：

效果：

二、时钟指针编写

在编写指针时需要注意，指针的旋转运动是围绕圆心进行的，使用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 } }

调用就能够将时钟放置到你想要的位置

因为之前设置了props的原因，所以可以通过简单的设置调整时钟的大小和颜色风格

color为#bec8e4

现在的时钟样式：

完整组件代码

JavaScript Vue web前端 开发者

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。