【css + echarts】实现两种时钟展示

前言：通过组件和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 }
          ]

        }

      ]
    }
    

• 根据时钟的特性其时针分针所指的位置并不是准确的当前时间，而是要加上下一级的时间

• 具体的样式设计是根据echarts示例中的文档改编而来，如果想要真正弄清楚原理，建议去了解相关api

• 图中使用的时针分针是自己ps抠图得到的，echarts对于png和svg格式的图片都支持，但svg格式图片更好，因为可以直接通过配置项控制样式，这里用到的是png格式，在使用时需加image icon: 'image://' + minutehand + '',

文档指路

https://echarts.apache.org/zh/option.html#title

echarts的使用体验还是很不错的，众多的配置项信息提供了更高的个性化定制的可能，可以完成更多的设计