每日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. guitar pro系列教程（二十三）：如何使用Guitar Pro制作扫弦

    前面的章节小编和大家讲解了很多关于Guitar Pro的使用功能,本章节我们将还是采用图文结合的方式和大家讲解如何使用Guitar Pro 制作扫弦,感兴趣的朋友可以进来看看哦. 扫弦的概念 对于很多 ...

  2. Nginx搭建文件共享服务器

    前言 Nginx除了做正反向代理和负载均衡,还能做动静分离服务器,如此便可以当作文件共享服务器使用. 环境 WIN 10 Vmware Workstation 15 Player CentOS Lin ...

  3. js实现长按显示全部内容

    js实现文字超出省略号显示时长按显示全部 元素内容超出省略号显示时长按该元素,生成toast弹窗(id:toolkitContainer),以显示全部内容 #toolkitContainer { ma ...

  4. 【原创】视频+文字：详解VBA解决数独问题

    [说在前面]: 之前,我在微信朋友圈看到一个同事发了一个状态,说的是她在家辅导孩子做作业,一个数独的题目,好像没有做出来.我看了下,我也做不出来,后来仔细想了下,花了两个多小时时间,用Python编了 ...

  5. redis new

    redis cluster 数据结构 geo,heperloglog 3个非核心dict:阻塞dict,非阻塞dict,watch dict 3个bio线程,生产者消费者模式,主线程生产者: 1.la ...

  6. 《应用计算方法教程》matlab作业一

    运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: 运行界面: word文档百度云链接: 链接:https://pan.baidu.com/s/ ...

  7. 自动化运维工具之Puppet模块

    前文我们了解来puppet的变量.流程控制.正则表达式.类和模板的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14079208.html:今天我们来 ...

  8. 第9.4节 Python中用readline读取二进制文件方式打开文件

    在<第9.3节 Python的文件内容读取:readline>中介绍了使用readline读取文件的处理,readline除了使用文本文件方式打开文件读外,也可以读取二进制方式打开的文件, ...

  9. 第14章 web前端开发小白学爬虫结束语

    老猿学爬虫应该是2019年7月初开始的,到现在2个多月了,有段时间了,这部分一直是老猿期待能给大家带来收获的,因为老猿爬虫实战应用的场景与网上老猿已知的场景基本都不一样,是从复用网站登录会话信息来开发 ...

  10. PyQt学习随笔：ListView控件获取当前选择项的方法

    通过currentIndex()可以获取listView控件的当前选择元素,如果选择了多个,则可以通过selectedIndexes()来获取选择的元素,不过这两个函数返回的是元素数据,而不是索引编号 ...