每日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. (原创)用.NET Core实现一个在线客服系统(上篇)

    前言 没有视频的介绍显得尤为空白仓促.所以,如果你不赶时间,看看视频先 → → 戳我看视频 ← ←  在线演示访客端:http://role.fuyue.xyz/visitor/index客服端:ht ...

  2. Java基础教程——枚举类型

    枚举类型 枚举类型在JDK 5时引入. enum WeekEnum { MONDAY, TUESDAY, WEDNESDAY, THURDAY, FRIDAY, SATURDAY, SUNDAY } ...

  3. 《Spring Boot 实战纪实》之如何攥写需求文档

    目录 前言 (思维篇)人人都是产品经理 1.需求文档 1.1 需求管理 1.2 如何攥写需求文档 1.3 需求关键点文档 2 原型设计 2.1 缺失的逻辑 2.2 让想法跃然纸上 3 开发设计文档 3 ...

  4. AppWeb认证绕过漏洞(CVE-2018-8715)

    AppWeb认证绕过漏洞(CVE-2018-8715) 一.漏洞描述 Appweb简介 Appweb是一个嵌入式HTTP Web服务器,主要的设计思路是安全.这是直接集成到客户的应用和设备,便于开发和 ...

  5. C++反射机制：可变参数模板实现C++反射（二）

    1. 概要   2018年Bwar发布了<C++反射机制:可变参数模板实现C++反射>,文章非常实用,Bwar也见过好几个看了那篇文章后以同样方法实现反射的项目,也见过不少从我的文章抄过去 ...

  6. 如何在Linux下关闭ARP协议

    方法一:临时关闭ARP协议 echo 1 > /proc/sys/net/ipv4/conf/eth0/arp_ignoreecho 2 > /proc/sys/net/ipv4/conf ...

  7. windows服务器下tomcat 8.0 配置远程调试

    在tomcat的bin目录下, 添加debug.txt文件, 然后输入: set JPDA_ADDRESS=9901set JPDA_TRANSPORT=dt_socketset CATALINA_O ...

  8. 第4章 基础知识进阶 第4.1节 Python基础概念之迭代、可迭代对象、迭代器

    第四章 基础知识进阶第十七节 迭代.可迭代对象.迭代器 一.    引言 本来计划讲完元组和字典后就讲列表解析和字典解析,但要理解列表解析和字典解析,就需要掌握Python的高级的类型迭代器,因此本节 ...

  9. 第12.6节 Python标准库其他内置模块导览

    一. 文本处理服务 string模块 : 常见的字符串操作 difflib模块: 计算差异的辅助工具 textwrap模块: 文本自动换行与填充,能够格式化文本段落,以适应给定的屏幕宽度: unico ...

  10. react+redux项目搭建及示例

    React + Redux示例,实现商品增删改 目录结构 1.项目搭建 1.1 使用create-react-app react_redux创建项目 1.2 安装使用redux需要的依赖 npm in ...