本文目录

序

Neumorphism

正文开始

一、时钟表盘编写

二、时钟指针编写

三、时钟组件的调用

完整组件代码

序

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

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

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

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

钟表时间：

数字时间：

Neumorphism

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

Neumorphism风格页面

正文开始

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

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

一、时钟表盘编写

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

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

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

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

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

代码：

<template><!-- 时钟 --><div class="clock" :style="styleVar"><!-- 内圈 --><div class="innerBorder"><!-- 时钟刻度 --><div class="scale mark1"></div><div class="scale mark2"></div><div class="scale mark3"></div><div class="scale mark4"></div><div class="scale mark5"></div><div class="scale mark6"></div><div class="scale mark7"></div><div class="scale mark8"></div></div><!-- 内圈波浪 --><div class="wave"></div></div>
</template>
<script>
export default {name: 'clock',components: {},props: {bgsize: {type: Number,default: 180},bgcolor: {type: String,default: '#D1CCC0'}},data() {return {};},created() {},mounted() {},watch: {},computed: {styleVar() {return {'--clock-size': this.bgsize + 'px','--clock-bgcolor': this.bgcolor,'--length-log2E': ((this.bgsize - 10) / 2) / Math.LOG2E + 'px',}}},methods: {},
};
</script>
<style scoped>/* 外部大小和阴影 */.clock {width: var(--clock-size);height: var(--clock-size);border-radius: 50%;box-shadow: 5px 5px 10px var(--clock-bgcolor), -4px -4px 8px #fff;}/* 内阴影 */.innerBorder {/* calc加var计算 */width: calc(var(--clock-size) - 10px);height: calc(var(--clock-size) - 10px);position: relative;left: 5px;top: 5px;box-shadow: -3px -3px 6px #fff inset, 3px 3px 6px var(--clock-bgcolor) inset;border-radius: 50%;}/* 时钟刻度 */.scale {width: 2px;height: 8px;position: absolute;box-shadow: 1px 1px 1px #9D958F inset, -1px -1px 1px var(--clock-bgcolor) inset;border-radius: 1px;}/* 设置小刻度位置 */.mark1 {left: calc(50% - 1px);top: 2px;}.mark2 {transform: rotate(45deg);left: calc(50% + var(--length-log2E) );top: calc(50% - var(--length-log2E) );}.mark3 {transform: rotate(90deg);left: calc(100% - 7px);top: calc(50% - 1px);}.mark4 {transform: rotate(135deg);left: calc(50% + var(--length-log2E) - 5px);top: calc(50% + var(--length-log2E) - 5px);}.mark5 {left: calc(50% - 1px);bottom: 2px;}.mark6 {transform: rotate(45deg);left: calc(50% - var(--length-log2E) + 5px);top: calc(50% + var(--length-log2E) - 5px);}.mark7 {transform: rotate(90deg);left: 2px;top: calc(50% - 1px);}.mark8 {transform: rotate(135deg);left: calc(50% - var(--length-log2E) );top: calc(50% - var(--length-log2E) );}/* 中间波浪 */.wave {width: 30%;height: 30%;position: absolute;left: 35%;top: 35%;box-shadow: 3px 3px 9px var(--clock-bgcolor), -3px -3px 9px #fff;border-radius: 50%;filter: blur(1px);animation: wavemove 4s infinite linear;}@keyframes wavemove {0% {transform: scale(0.5);}50% {transform: scale(1);opacity: 1;}100% {transform: scale(1.7);opacity: 0;}}
</style>

效果：

二、时钟指针编写

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

现在的时钟样式：

完整组件代码

<template><!-- 时钟 --><div class="clock" :style="styleVar"><!-- 内圈 --><div class="innerBorder"><!-- 时钟刻度 --><div class="scale mark1"></div><div class="scale mark2"></div><div class="scale mark3"></div><div class="scale mark4"></div><div class="scale mark5"></div><div class="scale mark6"></div><div class="scale mark7"></div><div class="scale mark8"></div></div><!-- 内圈波浪 --><div class="wave"></div><!-- 时针、分针、秒针 --><div class="hands hourhand"></div><div class="hands minhand"></div><div class="hands sechand"></div></div>
</template><script>
export default {name: 'clock',components: {},props: {bgsize: {type: Number,default: 180},bgcolor: {type: String,default: '#D1CCC0'}},data() {return {hour: 0,  //小时minute: 0,  //分钟 second: 0,  //秒};},created() {},mounted() {this.currentTime();// 定时校准setInterval(this.currentTime, 1000);},watch: {},computed: {styleVar() {return {'--clock-size': this.bgsize + 'px','--clock-bgcolor': this.bgcolor,'--length-log2E': ((this.bgsize - 10) / 2) / Math.LOG2E + 'px',}}},methods: {// 校准时钟指针方法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)';}},
};
</script>
<style scoped>/* 外部大小和阴影 */.clock {width: var(--clock-size);height: var(--clock-size);border-radius: 50%;box-shadow: 5px 5px 10px var(--clock-bgcolor), -4px -4px 8px #fff;}/* 内阴影 */.innerBorder {/* calc加var计算 */width: calc(var(--clock-size) - 10px);height: calc(var(--clock-size) - 10px);position: relative;left: 5px;top: 5px;box-shadow: -3px -3px 6px #fff inset, 3px 3px 6px var(--clock-bgcolor) inset;border-radius: 50%;}/* 时钟刻度 */.scale {width: 2px;height: 8px;position: absolute;box-shadow: 1px 1px 1px #9D958F inset, -1px -1px 1px var(--clock-bgcolor) inset;border-radius: 1px;}/* 设置小刻度位置 */.mark1 {left: calc(50% - 1px);top: 2px;}.mark2 {transform: rotate(45deg);left: calc(50% + var(--length-log2E) );top: calc(50% - var(--length-log2E) );}.mark3 {transform: rotate(90deg);left: calc(100% - 7px);top: calc(50% - 3px);}.mark4 {transform: rotate(135deg);left: calc(50% + var(--length-log2E) - 5px);top: calc(50% + var(--length-log2E) - 5px);}.mark5 {left: calc(50% - 1px);bottom: 2px;}.mark6 {transform: rotate(45deg);left: calc(50% - var(--length-log2E) + 5px);top: calc(50% + var(--length-log2E) - 5px);}.mark7 {transform: rotate(90deg);left: 2px;top: calc(50% - 3px);}.mark8 {transform: rotate(135deg);left: calc(50% - var(--length-log2E) );top: calc(50% - var(--length-log2E) );}/* 中间波浪 */.wave {width: 30%;height: 30%;position: absolute;left: 35%;top: 35%;box-shadow: 3px 3px 9px var(--clock-bgcolor), -3px -3px 9px #fff;border-radius: 50%;filter: blur(1px);  /* 模糊处理 */animation: wavemove 4s infinite linear; }@keyframes wavemove {0% {transform: scale(0.5);}50% {transform: scale(1);opacity: 1;}100% {transform: scale(1.7);opacity: 0;}}/*************************** 时针、分针、秒针 ****************************/.hands {position: absolute;transform-origin: bottom;border-radius: 10px;z-index: 300;bottom: 50%;left: calc(50% - 1px);}  .sechand {width: 2px;height: 42%;background-image:  linear-gradient( #CD69C9, #1CA6F3);}.minhand {width: 4px;height: 33%;background-color: #9BA5AA;left: calc(50% - 2px);}.hourhand {width: 6px;height: 21%;background-color: #BEC8E4;left: calc(50% - 3px);}
</style>

三步教你编写一个Neumorphism风格的小时钟相关推荐

教你用 JavaScript 设计一个 Neumorphism 风格的数字时钟 (代码详解)
时钟是我们用来测量时间的装置.如果使用得当,时钟对于任何 UI 都是有用的元素.时钟可用于以时间为主要关注点的网站,例如一些预订网站或一些显示火车.公共汽车.航班等到达时间的应用程序.时钟基本上有两种 ...
多个PDF文件如何合并成一个？三步教你搞定
在日常学习生活中,如果你需要将多个文档整合为一个完整的文件,比如说多篇文章.多张图片.多个表格等等,这时候就需要将这些文档合并成一个PDF文件.如何将多个PDF文件如何合并成一个?三步教你搞定. 步骤 ...
三步教你用Node做一个微信哄女友(基友)神器，小白可上手
前言不知道大家最近有没有被python版的<微信每日说>刷屏呢,他可是霸占了github的python热门快两周了.我们前端的小伙伴是不是也看着有点眼馋呢,因为毕竟是不那么熟悉的pyth ...
思路+步骤+方法，三步教你如何快速构建用户画像？
思路+步骤+方法,三步教你如何快速构建用户画像? 2016-10-07 超哥互联网er的早读课互联网er的早读课数十万互联网从业者的共同关注! 作者:超哥.作者授权早读课发表,转载请联系作者. ...
keyshot怎么贴logo_KeyShot图文教程，三步教你如何使用添加有织纹的Logo
KeyShot图文教程,三步教你如何使用添加有织纹的Logo KeyShot软件是一款功能非常强大的渲染软件,我们可以实现各种效果逼真的渲染效果,同时知晓一定的技巧,我们也可以实现各种想要的小效果,比 ...
虚拟机服务器资料安全,绝密：三步教你轻松窃取VMware虚拟机及其数据漏洞预警 -电脑资料...
是否记得曾经虚拟化过的邮件服务器或者薪酬支付系统?如果拥有访问虚拟化工作环境管理员权限,就可以轻松地进入该虚拟化工作环境,并且窃取所有的数据,而又不会留下任何痕迹, 虚拟化技术可以提供很多物理服务器无 ...
手把手教你编写一个上位机
关注+星标公众号,不错过精彩内容转自 | 嵌入式大杂烩嵌入式开发,基本都会用到有一些上位机工具,比如串口助手就是最常用的工具之一. 那么,今天分享有一篇由ZhengN整理的用Qt写的简单上位机教程 ...
三步教你轻松分辨区块链项目真伪
三步教你轻松分辨区块链项目真伪最近区块链数字货币的项目越来越多,大部分涉嫌虚假宣传,套用资金盘模式,参与的人大多数都是区块链小白,网络项目小白,什么都不懂,熟人一说就被忽悠信了.今天发一篇文章,教一 ...
为什么计算机桌面图标不见了,桌面上的图标不见了怎么办（电脑桌面图标突然没了怎么办？简单三步教你解决）...
使用电脑过程中,我们有时候会发现桌面上的图标不见了,或者我们不小心误删了,这时候我们又急着是用电脑,怎么办呢?在这里网际简单三步教你解决!以win10系统来教大家怎么找回我的桌面电脑图标如下简单3步: ...

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

本文目录

序