前言:通过组件和css的样式设计,实现古典钟和电子钟两种样式展示,为你的网站增加活力
1.时钟原理
JS 原生库
Date()
可以获取当前时间,setInterval()
去定时更新时间,从而达到时钟效果
2.电子钟(CSS实现样式)
html
<div class="digital-clock" v-loading="loading" :element-loading-svg="svg" element-loading-svg-view-box="5 5 200 200" element-loading-background="rgba(0, 0, 0, 0.8)">
<div class="time">
{
{nowTime}}
</div>
<div class="today">
{
{today}}
</div>
</div>
css
.digital-clock {
margin-top: 50px;
width: 250px;
height: 90px;
border: 1px solid black;
background-color: black;
color: white;
box-shadow: 10px 10px 5px grey;
}
.time {
font-size: 30px;
padding: 20px 20px 0 20px;
}
.today {
padding-top: 10px;
padding-left: 20px;
}
js
<script>
import getToday from '@/helpers/getToday'
import {
getCurrentInstance, onMounted, ref, watch } from 'vue'
export default {
name: 'homepage',
setup () {
const {
proxy } = getCurrentInstance()
const today = getToday()
const nowdate = ref('')
const nowTime = ref('')
const loading = ref(true)
const getTime = () => {
loading.value = true
// 等执行完全部数据的展示再取消loading
setInterval(() => {
nowdate.value = new Date().toLocaleString('chinese', {
hour12: false }) // 电子钟一般都是24小时计,所以改了时间
nowTime.value = nowdate.value.slice(-8)
loading.value = false
}, 1000);
}
onMounted(() => {
getTime()
})
return {
today,
nowTime,
loading,
}
}
}
</script>
getToday() 是处理日期的方法,
如果想要更好看可以将年月日单独取出,用不同颜色表示,就更像真实的电子钟了
const getToday = () => {
const date = new Date()
const days = {
1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '日' }
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 星期' + days[date.getDay() || 7]
}
export default getToday
3.古典钟(echarts插件)
古典钟的实现需要依赖插件,会更复杂,但是展示的效果会更丰富
3.1 插件安装
npm install echarts --save
main.js中配置
import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts
3.2 具体实现
html
<div>
<div id="clock" :style="{ width: '600px', height:'600px'}"></div>
</div>
js
const clockEchart = () => {
const clock = proxy.$echarts.init(document.getElementById('clock'))
// 先把基础样式赋值进去
clock.setOption(option)
setInterval(() => {
var date = new Date()
const second = date.getSeconds()
const minute = date.getMinutes() + second / 60
const hour = (date.getHours() % 12) + minute / 60
option.animationEasingUpdate = 300
clock.setOption({
series: [
{
name: 'hour',
animation: hour !== 0,
data: [{
value: hour }]
},
{
name: 'minute',
animation: minute !== 0,
data: [{
value: minute }]
},
{
name: 'second',
animation: second !== 0,
data: [{
value: second }]
}
]
})
}, 1000);
}
//设置图的样式
const option = {
series: [
{
name: 'hour',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 12,
splitNumber: 12,
clockwise: true,
// 控制刻度线外层的样式
axisLine: {
lineStyle: {
width: 15, // 轴宽度
color: [[1, '#633011']], // 轴的颜色
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影的颜色
shadowBlur: 25 // 阴影的宽度
}
},
// 刻度上分割线的样式
splitLine: {
length: 11,
// 分割线的样式控制
lineStyle: {
color: '#A56160',
width: 3,
cap: 'round',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 3,
shadowOffsetX: 1,
shadowOffsetY: 2
}
},
// 刻度标签
axisLabel: {
fontSize: 35, // 刻度大小
fontStyle: 'oblique', // 刻度样式
distance: 28,
fontFamily: 'Rockwell',
formatter: function (value) {
// console.log(value, 'axisLabel中的formatter')
if (value === 0) {
return ''
}
return value + ''
}
},
// 固定点的设计,可用于图表设计
anchor: {
show: true,
icon: 'image://' + clockIcon + '', // 图像的地址
showAbove: false, // 固定点是否在指针上面
offsetCenter: [0, '-35%'], // 固定点相对于仪表盘中心的偏移位置 第一项是水平,第二项是垂直
size: 200, // 固定点的大小
keepAspect: true, // 当图标是path:// 形式时,是否在缩放时保持该图像的长宽比
// 固定点的样式
itemStyle: {
color: '#707177'
}
},
// 指针样式,可用图标展示
pointer: {
icon: 'image://' + clockwise + '',
width: 200,
length: '75%',
offsetCenter: [0, '8%'],
// 设置阴影样式,产生立体感
itemStyle: {
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show: false
},
title: {
offsetCenter: [0, '30%']
},
data: [
{
value: 0 }
]
},
{
name: 'minute',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
clockwise: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
icon: 'image://' + minutehand + '',
width: 200,
length: '80%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
},
},
// 底部中心点的样式
anchor: {
show: true,
size: 20,
showAbove: false,
itemStyle: {
borderWidth: 15,
borderColor: 'rgba(1,0,0,0.7)',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
},
},
detail: {
show: false
},
title: {
offsetCenter: ['0%', '-40%']
},
data: [
{
value: 0 }
],
},
{
name: 'second',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
animationEasingUpdate: 'bounceOut',
clockwise: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 4,
length: '85%',
offsetCenter: [0, '8%'],
itemStyle: {
color: 'black',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
anchor: {
show: true,
size: 15,
showAbove: true,
itemStyle: {
color: 'rgba(165,97,96, 0.9)',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show: false
},
title: {
offsetCenter: ['0%', '-40%']
},
data: [
{
value: 0 }
]
}
]
}
文档指路
https://echarts.apache.org/zh/option.html#title
echarts的使用体验还是很不错的,众多的配置项信息提供了更高的个性化定制的可能,可以完成更多的设计