练手小项目2--简约时钟（HTML+CSS+JavaScript）话不多说，先上图这是一个简单的html+css+js

话不多说，先上图

这是一个简单的html+css+js完成的简约时钟，会根据真实的时间自动更新页面的数据

话不多说，上上上代码...

1.创建html文件，引入css样式

第一部划定一个容器，在容器内置入8个p标签，具体用途如下图代码所示

<!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>
    <link rel="stylesheet" href="./Clock.css" />
  </head>
  <body>
    <div class="clock">
      <p id="1">0</p>
      <p id="2">0</p>
      <p id="3">:</p>
      <p id="4">0</p>
      <p id="5">0</p>
      <p id="6">:</p>
      <p id="7">0</p>
      <p id="8">0</p>
    </div>
  </body>
</html>

2.书写js

<script>
      function myTime() {
        let time = new Date();
        let hh = time.getHours();
        let mm = time.getMinutes();
        let ss = time.getSeconds();

        document.getElementById('1').innerHTML = Math.floor(hh / 10);
        document.getElementById('2').innerHTML = hh % 10;
        document.getElementById('4').innerHTML = Math.floor(mm / 10);
        document.getElementById('5').innerHTML = mm % 10;
        document.getElementById('7').innerHTML = Math.floor(ss / 10);
        document.getElementById('8').innerHTML = ss % 10;
      }
      setInterval(myTime, 1000);
    </script>

结果如图所示

3.调整css样式

/* 引入网络字体(kaint字体） */
@import url('http://fonts.googleapis.com/css?family=kanit');
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eacccc;
  user-select: none;
}
.clock {
  display: flex;
}
.clock p {
  width: 95px;
  font-size: 150px;
  color: white;
  text-align: center;
  font-family: 'kanit';
  font-weight: 900px;
  text-shadow: 0 1px 0 #deafaf, 0 2px 0 #bda8a9, 0 3px 0 #d8a1a1,
    0 4px 0 #d59999, 0 5px 0 #d29292, 0 6px 0 #cf8b8b, 0 7px 0 #cc8484,
    0 8px 0 #c97d7d, 0 0 5px rgba(231, 156, 156, 0.1);
}