每日CSS_实时时钟效果

2020_12_22

源码链接

1. 代码解析

1.1 html 代码片段

<div class="clock">

  <div class="hour">

    <div class="hr" id="hr"></div>

  </div>

  <div class="min">

    <div class="mn" id="mn"></div>

  </div>

  <div class="sec">

    <div class="sc" id="sc"></div>

  </div>

</div>

如类名所示, clock 容纳整个时钟, 其子类 hour, min, sec 为各个指针的容纳块, 而 hr, mn, sc 代表了各个指针.

1.2 script 代码片段

<script>

  const deg = 6;

  const hr = document.querySelector('#hr');

  const mn = document.querySelector('#mn');

  const sc = document.querySelector('#sc');

  setInterval(()=>{

    let day = new Date();

    // 一个小时转 30 度

    let hh = day.getHours() * 30;

    let mm = day.getMinutes() * deg;

    let ss = day.getSeconds() * deg;

    hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;

    mn.style.transform = `rotateZ(${mm}deg)`;

    // ``是模板运算符, 可以自动执行

    sc.style.transform = `rotateZ(${ss}deg)`;

  })

</script>

需要注意的代码有两个, hr.style.transform =rotateZ(${(hh)+(mm/12)}deg); 60分钟时钟转30度, 所以, 分钟和时钟转的度数有个两倍关系, 此时的 mm 是分钟 * 6, 因此, 时钟转的度数是, mm / (2*6).

const deg = 6; 时钟有 60 个小格, 360度, 因此每格 6 度.

1.3 css 代码片段

基础设置

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body{

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  background: #98889c;

}

时钟背景设置

.clock{

  width: 350px;

  height: 350px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: url("clock2.png");

  background-size: cover;

  border: 4px solid #0f1621;

  border-radius: 50%;

  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),

              inset 0 -15px 15px rgba(255, 255, 255, 0.05),

              0 15px 15px rgba(0, 0, 0, 0.3),

              inset 0 15px 15px rgba(0, 0, 0, 0.3);

}

中心小圆点设置

.clock:before{

  content: "";

  position: absolute;

  width: 15px;

  height: 15px;

  background: #fff;

  border-radius: 50%;

  z-index: 10;

}

时钟, 分钟, 秒钟 区域设置

.clock .hour,

.clock .min,

.clock .sec{

  position: absolute;

}

.clock .hour, .hr{

  width: 160px;

  height: 160px;

}

.clock .min, .mn{

  width: 190px;

  height: 190px;

}

.clock .sec, .sc{

  width: 230px;

  height: 230px;

}

.hr, .mn, .sc{

  display: flex;

  justify-content: center;

  border-radius: 50%;

}

时钟, 分钟, 秒钟的指针创建

.hr:before{

  content: "";

  position: absolute;

  width: 8px;

  height: 80px;

  background: #ff105e;

  z-index: 1;

  border-radius: 6px 6px 0 0;

}

.mn:before{

  content: "";

  position: absolute;

  width: 4px;

  height: 90px;

  background: #fff;

  z-index: 2;

  border-radius: 6px 6px 0 0;

}

.sc:before{

  content: "";

  position: absolute;

  width: 2px;

  height: 150px;

  background: #fff;

  z-index: 3;

  border-radius: 6px 6px 0 0;

}

2. 源码

2.1 html 源码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <link rel="stylesheet" href="2020_12_21.css">

</head>

<body>

<div class="clock">

  <div class="hour">

    <div class="hr" id="hr"></div>

  </div>

  <div class="min">

    <div class="mn" id="mn"></div>

  </div>

  <div class="sec">

    <div class="sc" id="sc"></div>

  </div>

</div>

<script>

  const deg = 6;

  const hr = document.querySelector('#hr');

  const mn = document.querySelector('#mn');

  const sc = document.querySelector('#sc');

  setInterval(()=>{

    let day = new Date();

    // 一个小时转 30 度

    let hh = day.getHours() * 30;

    let mm = day.getMinutes() * deg;

    let ss = day.getSeconds() * deg;

    // console.log(hh);

    hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;

    mn.style.transform = `rotateZ(${mm}deg)`;

    sc.style.transform = `rotateZ(${ss}deg)`;

  })

</script>

</body>

</html>

2.2 css 源码

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body{

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  background: #98889c;

}

.clock{

  width: 350px;

  height: 350px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: url("clock2.png");

  background-size: cover;

  border: 4px solid #0f1621;

  border-radius: 50%;

  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),

              inset 0 -15px 15px rgba(255, 255, 255, 0.05),

              0 15px 15px rgba(0, 0, 0, 0.3),

              inset 0 15px 15px rgba(0, 0, 0, 0.3);

}

.clock:before{

  content: "";

  position: absolute;

  width: 15px;

  height: 15px;

  background: #fff;

  border-radius: 50%;

  z-index: 10;

}

.clock .hour,

.clock .min,

.clock .sec{

  position: absolute;

}

.clock .hour, .hr{

  width: 160px;

  height: 160px;

}

.clock .min, .mn{

  width: 190px;

  height: 190px;

}

.clock .sec, .sc{

  width: 230px;

  height: 230px;

}

.hr, .mn, .sc{

  display: flex;

  justify-content: center;

  border-radius: 50%;

}

.hr:before{

  content: "";

  position: absolute;

  width: 8px;

  height: 80px;

  background: #ff105e;

  z-index: 1;

  border-radius: 6px 6px 0 0;

}

.mn:before{

  content: "";

  position: absolute;

  width: 4px;

  height: 90px;

  background: #fff;

  z-index: 2;

  border-radius: 6px 6px 0 0;

}

.sc:before{

  content: "";

  position: absolute;

  width: 2px;

  height: 150px;

  background: #fff;

  z-index: 3;

  border-radius: 6px 6px 0 0;

}

每日CSS_实时时钟效果的更多相关文章

  1. *【Python】【demo实验30】【练习实例】【使用Turtle实现实时时钟效果】

    目的: 使用Turtle实现实时时钟效果 源代码: # encoding=utf-8 # -*- coding: UTF-8 -*- import turtle from datetime impor ...

  2. 每日CSS_发光文本效果

    每日CSS_发光文本效果 2020_12_22 源码 1. 代码解析 1.1 html 代码片段 <h1> <span>今</span> <span>天 ...

  3. 每日CSS_霓虹灯按钮悬停效果

    每日CSS_霓虹灯按钮悬停效果 2020_12_20 1. 代码解析 1.1 html 代码片段解析 <a href="#"> <span></spa ...

  4. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

  5. Maxim实时时钟芯片设计指南5791-关于编写健壮的实时时钟控制代码的提示

    用DS12C887设计一个万年历,虽然反复查看说明书,还是出各种的错误. 因此,从美信官网查询资料,翻译的不太通,凑合着对照看. 原文链接 Tips for Writing Bulletproof R ...

  6. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  7. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

  8. 轻松吃透实时时钟芯片DS1302软硬件设计，看完秒懂

    今天我们来讨论一款老掉牙的实时时钟芯片DS1302.什么是实时时钟(RealTime Clock, RTC)呢?为什么我们需要它呢?假设你使用单片机实现万年历应用,一般的做法是这样的:设置中断后判断1 ...

  9. ASM:《X86汇编语言-从实模式到保护模式》第9章：实模式下中断机制和实时时钟

    中断是处理器一个非常重要的工作机制.第9章是讲中断在实模式下如何工作,第17章是讲中断在保护模式下如何工作. ★PART1:外部硬件中断 外部硬件中断是通过两个信号线引入处理器内部的,这两条线分别叫N ...

随机推荐

  1. 如何循序渐进、有效地学习JavaScript？

    转载链接:https://www.zhihu.com/question/19713563/answer/23068003 分享一篇 超毛 的一篇文章<如何学习javascript>(原文链 ...

  2. 系统提供的dispatch方法

    h1, h2, h3, h4, h5, h6, p, blockquote { margin: 0; padding: 0 } body { font-family: "Helvetica ...

  3. VueCli 4.0+ 版本安装插件与VueCLI 旧版本的不同

    通过VueCli 脚手架 4+ 版本创建的项目,在引入插件文件并配置时,是通过 import {Create* } ,旧版本是直接导入全部,在配置相应的文件时,重新new 一个:然后再通过Vue 进行 ...

  4. C语言讲义——变量(variable)

    变量(variable) 变量用于存放数据 变量是供程序操作的存储区的名字 变量有类型,该类型决定了变量占用内存的大小 字节→ C语言有以下6种简单变量类型: 类型细分: 变量在内存中需要占据空间,内 ...

  5. IB卡开启EIPOIB做虚拟化桥接使用

    步骤1:开启EiPOIB 编辑默认"no"为"yes" /etc/infiniband/openib.conf E_IPOIB_LOAD=yes 步骤2:重启h ...

  6. 痞子衡嵌入式：一个奇怪的Keil MDK下变量链接强制对齐报错问题(--legacyalign)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是一个奇怪的Keil MDK下变量链接强制对齐报错问题. 痞子衡最近一直在参与恩智浦SBL项目(就是一个适用LPC和i.MXRT的完整OT ...

  7. Alpha冲刺-第九次冲刺笔记

    Alpha冲刺-冲刺笔记 这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE2 这个作业要求在哪里 https://edu.cnblogs. ...

  8. 软件安全----警惕缓冲区溢出（C中那些不安全的库函数）

    原文链接:https://blog.csdn.net/yang_yulei/article/details/45314177 链接:http://www.360doc.com/content/11/0 ...

  9. Android Studio下的简单网页解析

    Android Studio下的简单网页解析 一.导入数据 导入前添加依赖 implementation 'org.jsoup:jsoup:1.11.3' 使用字符串导入 String html = ...

  10. Kubernetes K8S之固定节点nodeName和nodeSelector调度详解

    Kubernetes K8S之固定节点nodeName和nodeSelector调度详解与示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-mas ...