css实现数字时钟

-風过无痕

已于 2022-11-27 17:44:24 修改

阅读量1.3k

点赞数 1

分类专栏：小案例文章标签： css javascript html

于 2022-11-25 21:05:01 首次发布

本文链接：https://blog.csdn.net/weixin_53579656/article/details/128044511

版权

小案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

思路

利用new Date () .toLocaleTimeString () 方法获取当前时间转化成时分秒的字符串。
每一秒种执行一次这个方法，利用document.getElementById () 获取到元素赋值。
布局方式父元素占满全屏，时钟这个div用子绝父相+平移永远定位到屏幕中间。
给时钟这个div 设置flex布局水平和垂直都居中，这样数字时间就居中了。

具体细节大家可以根据自己喜欢的调试，废话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>当前时间</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .father {
        width: 100vw;
        height: 100vh;
        background-color: cadetblue;
        position: relative;
      }
      .box {
        width: 400px;
        height: 145px;
        background-color: rgb(56, 56, 56);
        border: 20px solid #f5cd92;
        color: white;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #time {
        font-size: 85px;
        font-weight: 700;
        /* text-align: center;
        line-height: 280px; */
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="box">
        <div id="time"></div>
      </div>
    </div>
  </body>
  <script>
    function time () {
      document.getElementById(
        'time'
      ).innerText = new Date().toLocaleTimeString()
    }
    setInterval(time, 1000)
  </script>
</html>

Vue版

<template>
  <div class="xue">
    <div class="current-time">
      <div id="time"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      time: ''
    }
  },
  created() {
    this.time = setInterval(this.qin, 1000)
  },
  beforeDestroy() {
    clearInterval(this.time)
  },
  methods: {
    qin() {
      document.getElementById('time').innerText =
        new Date().toLocaleTimeString()
    }
  }
}
</script>

<style lang="scss" scoped>
.xue {
  min-height: calc(100vh - 50px);
  min-width: calc(100vw - 210px);
  background-color: cadetblue;
  position: relative;
  .current-time {
    width: 280px;
    height: 100px;
    background-color: rgb(56, 56, 56);
    border: 12px solid #ffebcd;
    color: white;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    #time {
      font-size: 55px;
      font-weight: 700;
    }
  }
}
</style>

小细节