每日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. 利用perspective 和 transform 里面的几个参数来实现旋转照片墙

    旋转照片墙 首先,来看下,是什么效果吧,上效果图 ↓ 其实这个东西,很容易制作,先说下思路, 把照片都给叠在一起,然后 rotateY 旋转,给每张图片 旋转不一样的角度能构成一圈, 然后transl ...

  2. Python正则表达式大全

    前言 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成 ...

  3. 一分钟了解 sync、fsync、fdatasync 系统调用

    目录 一.缓冲 二.延迟写的优缺点 三.sync.fsync.fdatasync 关注送书!<Netty实战>(今晚开奖) Hi,大家好!我是白日梦. 今天我要跟你分享的话题是:" ...

  4. PDF文件处理助手 3.3.2版本更新

    本次更新内容如下: 1.修复部分PDF在"去水印"-"文字水印"-"模式3"下识别不到的问题. 2.修复部分情况下可能无法正确加载授权的问题 ...

  5. Less从入门到精通——变量与混合

    变量(variables) Less中采用" @ "定义变量,使用时直接使用"@命名符". 作为普通变量 // 命名: @color:red; // 调用: d ...

  6. 自学linux——18.FTP服务器的搭建

    Centos7下FTP服务器的搭建 一.FTP的作用 文件传输协议(File Transfer Protocol,FTP),是一种在互联网中进行文件传输的协议,基于客户端/服务器模式,默认使用 20. ...

  7. 20200509_设置笔记本使用有线访问外网同时wifi访问外网

    1. 控制面板\所有控制面板项\网络连接 2. wifi的使用的手机热点, dhcp分配的, 不用做配置 3. 笔记本获取到的内网静态地址是192.168.3.11, 网关是192.168.3.254 ...

  8. 如何使用TradingView（TV）回测数字货币交易策略

    更多精彩内容,欢迎关注公众号:数量技术宅.想要获取本期分享的完整策略代码,请加技术宅微信:sljsz01 TradingView平台简介 前段时间,有粉丝找到技术宅,表示他有一个常用的交易平台,叫做T ...

  9. 数据库：Flask-SQLAlchemy

    一.安装以及使用 1.安装 安装 flask-sqlalchemy pip install flask-sqlalchemy 如果连接的是 mysql 数据库,需要安装 mysqldb pip ins ...

  10. 安装rose遇到的问题

    将rose文件夹里面的rose.rar直接解压到rose安装目录里面的common文件夹中 安装教程与问题解决连接https://blog.csdn.net/Farewell_w/article/de ...