每日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. css3系列之详解border-radius

    border-radius border-radius 几种写法: 1.border-radius: 50%; 以正方形为例子, 这样写就是设置 4个角 为50%. 2.border-radius: ...

  2. 小程序ui自动化（一），用uiAutormatorViewer定位元素失败，如何解决

    1.定位元素 用android ADT自带工具:uiAutormatorViewer,会报如下错误 可能是环境与手机不兼容 可以用以下方法解决:(参考:https://blog.csdn.net/qq ...

  3. 将input 的文本框改为不可编辑状态

    <input type="text" id = "textid" name="名称" value="值" size ...

  4. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  5. JAVA 中的Optional （臭名昭著的空指针异常（NullPointerException））

    从 Java 8 引入的一个很有趣的特性是 Optional  类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) -- 每个 Java 程序员都 ...

  6. 经典面试题解析：这道 C 编程面试题居然有如此多的解法！

    问题描述 任意给定一个32位无符号整数n,求n的二进制表示中1的个数,比如n = 5(0101)时,返回2,n = 15(1111)时,返回4 这也是一道比较经典的题目了,相信不少人面试的时候可能遇到 ...

  7. 010 editor的使用

    原文链接:http://www.cnblogs.com/vendanner/p/4939444.html 注意事项:之前一直在虚拟机winxp中添加template一直失败,原因可能是因为虚拟机的版本 ...

  8. JQuery 和 Bootstrap

    https://jquery.com/ 1. JQuery  的基础语法 $(select).action() 2. 查找标签 基本选择器 class选择器: $(".className&q ...

  9. spring aop 、Redis实现拦截重复操作

    一.问题:项目中有一些重复操作的情况,比如: 1.从场景有用户快速点击提交按钮,或者postMan测试时快速点击 2.从业务上来说,用户注册.用户下单等 3.黑客攻击 二.解决办法 1.使用sprin ...

  10. JavaScript原型链及其污染

    JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...