当前位置:主页 > JavsScript库 > 日期 / 时间 >

JavaScript中的移动优先时钟 UI - responsive-clock-ui
栏目分类:日期 / 时间   发布日期:2021-09-01   浏览次数:

一个非常干净、移动优先、新形态风格的模拟和数字时钟 UI,带有深色和浅色主题,使用 JavaScript、CSS 和 HTML 构建。

使用:

1.时钟UI的标记结构。

<section class="clock container">
  <div class="clock__container grid">
    <div class="clock__content grid">
      <div class="clock__circle">
        <span class="clock__twelve"></span>
        <span class="clock__three"></span>
        <span class="clock__six"></span>
        <span class="clock__nine"></span>
        <div class="clock__rounder"></div>
        <div class="clock__hour" id="clock-hour"></div>
        <div class="clock__minutes" id="clock-minutes"></div>
        <div class="clock__seconds" id="clock-seconds"></div>
        <!-- 暗/亮按钮 -->
        <div class="clock__theme">
          <i class='bx bxs-moon' id="theme-button"></i>
        </div>
      </div>
      <div>
        <div class="clock__text">
          <div class="clock__text-hour" id="text-hour"></div>
          <div class="clock__text-minutes" id="text-minutes"></div>
          <div class="clock__text-ampm" id="text-ampm"></div>
        </div>
        <div class="clock__date">
          <!-- <span id="date-day-week"></span> -->
          <span id="date-day"></span>
          <span id="date-month"></span>
          <span id="date-year"></span>
        </div>
      </div>
    </div>
  </div>
</section>

2. 在文档中加载必要的 JavaScript 和 CSS 文件。就是这样。

<link rel="stylesheet" href="assets/css/styles.css" />
<script src="assets/js/main.js"></script>

3. 通过覆盖默认的 CSS 变量来自定义时钟 UI。

:root {
  /*========== 颜色 ==========*/
  --hue-color: 240;
  --first-color: hsl(var(--hue-color), 53%, 49%);
  --title-color: hsl(var(--hue-color), 53%, 15%);
  --text-color: hsl(var(--hue-color), 12%, 35%);
  --text-color-light: hsl(var(--hue-color), 12%, 65%);
  --white-color: #FFF;
  --body-color: hsl(var(--hue-color), 24%, 94%);
  /*========== 字体和排版 ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 3rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .625rem;
  /*========== 字体粗细 ==========*/
  --font-medium: 500;
  /*========== Margenes 底部 ==========*/
  --mb-0-25: .25rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2-5: 2.5rem;
  /*========== z index ==========*/
  --z-normal: 1;
  --z-tooltip: 10;
}


官方网站:https://github.com/bedimcode/responsive-clock-ui

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库