找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: golang Linux PHP
查看: 199|回复: 1

HTML+CSS+JS 立体字时钟

[复制链接]

66

主题

27

回帖

621

积分

管理员

积分
621
发表于 2024-6-25 15:03:10 | 显示全部楼层 |阅读模式
实现了一个时钟效果,包括一个背景颜色为淡粉色的容器和一个使用Google字体库中的Kanit字体的时钟。时钟使用了flex布局,使其水平和垂直居中。时钟的数字使用了Kanit字体,字体大小为150px,字体加粗,阴影效果使用了多个不同颜色和大小的阴影,使其看起来更加立体和有层次感。

640.gif
HTML:
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>立体字时钟</title>
  7.     <link rel="stylesheet" href="./30-立体字时钟.css">
  8. </head>

  9. <body>
  10.     <div class="clock">
  11.         <p id="1">0</p>
  12.         <p id="2">0</p>
  13.         <p id="3">:</p>
  14.         <p id="4">0</p>
  15.         <p id="5">0</p>
  16.         <p id="6">:</p>
  17.         <p id="7">0</p>
  18.         <p id="8">0</p>
  19.     </div>
  20. </body>
  21. <script src="./30-立体字时钟.js"></script>

  22. </html>
复制代码
CSS
  1. @import url("http://fonts.googleapis.com/css?family=Kanit");

  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }

  6. body {
  7.     height: 100vh;
  8.     display: flex;
  9.     justify-content: center;
  10.     align-items: center;
  11.     background-color: #eacccc;
  12.     user-select: none;
  13. }

  14. .clock {
  15.     display: flex;
  16. }

  17. .clock p {
  18.     width: 95px;
  19.     font-size: 150px;
  20.     color: #fff;
  21.     text-align: center;
  22.     font-family: "Kanit";
  23.     font-weight: 900;
  24.     text-shadow: 0 1px 0 #deafaf,
  25.     0 2px 0 #bda8a8,
  26.     0 3px 0 #d8a1a1,
  27.     0 4px 0 #d59999,
  28.     0 5px 0 #d29292,
  29.     0 6px 0 #cf8b8b,
  30.     0 7px 0 #cc8484,
  31.     0 8px 0 #c97d7d,
  32.     0 0 5px rgba(231, 156, 156, 0.05),
  33.     0 -1px 3px rgba(231, 156, 156, 0.2),
  34.     0 9px 9px rgba(231, 156, 156, 0.3),
  35.     0 12px 12px rgba(231, 156, 156, 0.3),
  36.     0 15px 15px rgba(231, 156, 156, 0.3);
  37. }
复制代码
JavaScript

  1. function myTime() {
  2.     let time = new Date();
  3.     let hh = time.getHours();
  4.     let mm = time.getMinutes();
  5.     let ss = time.getSeconds();

  6.     document.getElementById("1").innerText = Math.floor(hh / 10);
  7.     document.getElementById("2").innerText = hh % 10;
  8.     document.getElementById("4").innerText = Math.floor(mm / 10);
  9.     document.getElementById("5").innerText = mm % 10;
  10.     document.getElementById("7").innerText = Math.floor(ss / 10);
  11.     document.getElementById("8").innerText = ss % 10;
  12. }

  13. setInterval(myTime, 1000);
复制代码
实现思路拆分

  1. @import url("http://fonts.googleapis.com/css?family=Kanit");
复制代码
这段代码使用了Google字体库中的Kanit字体,用于时钟数字的显示。

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
复制代码
这段代码设置了所有元素的外边距和内边距为0,这是为了避免不同浏览器之间的默认样式差异。

  1. body {
  2.     height: 100vh;
  3.     display: flex;
  4.     justify-content: center;
  5.     align-items: center;
  6.     background-color: #eacccc;
  7.     user-select: none;
  8. }
复制代码
这段代码设置了body元素的高度为100vh,使其占据整个视口的高度。同时,使用flex布局使其水平和垂直居中。背景颜色为淡粉色。使用user-select属性禁止用户选择文本。

  1. .clock {
  2.     display: flex;
  3. }
复制代码
这段代码设置了时钟的样式,使用flex布局,使其水平和垂直居中。

  1. .clock p {
  2.     width: 95px;
  3.     font-size: 150px;
  4.     color: #fff;
  5.     text-align: center;
  6.     font-family: "Kanit";
  7.     font-weight: 900;
  8.     text-shadow: 0 1px 0 #deafaf,
  9.     0 2px 0 #bda8a8,
  10.     0 3px 0 #d8a1a1,
  11.     0 4px 0 #d59999,
  12.     0 5px 0 #d29292,
  13.     0 6px 0 #cf8b8b,
  14.     0 7px 0 #cc8484,
  15.     0 8px 0 #c97d7d,
  16.     0 0 5px rgba(231, 156, 156, 0.05),
  17.     0 -1px 3px rgba(231, 156, 156, 0.2),
  18.     0 9px 9px rgba(231, 156, 156, 0.3),
  19.     0 12px 12px rgba(231, 156, 156, 0.3),
  20.     0 15px 15px rgba(231, 156, 156, 0.3);
  21. }
复制代码
这段代码设置了时钟数字的样式,使其宽度为95px,字体大小为150px,颜色为白色,居中对齐,使用了Google字体库中的Kanit字体,字体加粗。同时,使用了多个不同颜色和大小的阴影,使其看起来更加立体和有层次感。

66

主题

27

回帖

621

积分

管理员

积分
621
 楼主| 发表于 前天 17:15 | 显示全部楼层
92150404MADAEQE9X4
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表