周末时间，突然想用html+css实现一个简单的指针时钟的功能，以下是具体代码实现，文末附有线上链接地址。

效果图：

1、代码

1.1、clock.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>时钟</title>

  <script src="./js/utils.js"></script>

  <link rel="stylesheet" href="./css/clock.css">

</head>

<body>

  <div class="clock">

    <!-- 12个小时的点位 -->

    <div class="dotH dotH1"><div></div></div>

    <div class="dotH dotH2"><div></div></div>

    <div class="dotH dotH3"><div></div></div>

    <div class="dotH dotH4"><div></div></div>

    <div class="dotH dotH5"><div></div></div>

    <div class="dotH dotH6"><div></div></div>

    <!-- 60个分的点 -->

    <div class="dotM dotM1"><div></div></div>

    <div class="dotM dotM2"><div></div></div>

    <div class="dotM dotM3"><div></div></div>

    <div class="dotM dotM4"><div></div></div>

    <div class="dotM dotM5"><div></div></div>

    <div class="dotM dotM6"><div></div></div>

    <div class="dotM dotM7"><div></div></div>

    <div class="dotM dotM8"><div></div></div>

    <div class="dotM dotM9"><div></div></div>

    <div class="dotM dotM10"><div></div></div>

    <div class="dotM dotM11"><div></div></div>

    <div class="dotM dotM12"><div></div></div>

    <div class="dotM dotM13"><div></div></div>

    <div class="dotM dotM14"><div></div></div>

    <div class="dotM dotM15"><div></div></div>

    <div class="dotM dotM16"><div></div></div>

    <div class="dotM dotM17"><div></div></div>

    <div class="dotM dotM18"><div></div></div>

    <div class="dotM dotM19"><div></div></div>

    <div class="dotM dotM20"><div></div></div>

    <div class="dotM dotM21"><div></div></div>

    <div class="dotM dotM22"><div></div></div>

    <div class="dotM dotM23"><div></div></div>

    <div class="dotM dotM24"><div></div></div>

    <!-- 数字 -->

    <div class="num num1_7">

      <div>1</div>

      <div>7</div>

    </div>

    <div class="num num2_8">

      <div>2</div>

      <div>8</div>

    </div>

    <div class="num num3_9">

      <div>3</div>

      <div>9</div>

    </div>

    <div class="num num4_10">

      <div>4</div>

      <div>10</div>

    </div>

    <div class="num num5_11">

      <div>5</div>

      <div>11</div>

    </div>

    <div class="num num6_12">

      <div>6</div>

      <div>12</div>

    </div>

    <!-- 表盘圆心 -->

    <div class="circle"><div></div></div>

    <!-- 数字年月日 周 -->

    <div class="num-date" id="numDate"></div>

    <!-- 数字时间（时:分:秒） -->

    <div class="num-time">

      <span id="numHH">17</span>

      <span id="numMM">45</span>

      <span id="numSS">27</span>

    </div>

    <!-- 时针、分针、秒针 -->

    <div class="line line-h" id="lineH">

      <div></div>

    </div>

    <div class="line line-m" id="lineM">

      <div></div>

    </div>

    <div class="line line-s" id="lineS">

      <div></div>

    </div>

  </div>

  <script>

    let hDeg = 0;

    let mDeg = 0;

    let sDeg = 0;

    let lineH = document.getElementById('lineH');

    let lineM = document.getElementById('lineM');

    let lineS = document.getElementById('lineS');

    let numDate = document.getElementById('numDate');

    let numHH = document.getElementById('numHH');

    let numMM = document.getElementById('numMM');

    let numSS = document.getElementById('numSS');

    setInterval(() => {

      let time = getHms();

      hDeg = (time.h * 30 + time.m / 60 * 30 + time.s / 60 * 0.008333333333333333) - 90;

      mDeg = (time.m * 6 + time.s/60 * 6) - 90;

      sDeg = time.s * 6 - 90;

      lineH.style.transform = `rotate(${hDeg}deg)`;

      lineM.style.transform = `rotate(${mDeg}deg)`;

      lineS.style.transform = `rotate(${sDeg}deg)`;

      lineH.style.display = 'block';

      lineM.style.display = 'block';

      lineS.style.display = 'block';

      numDate.innerText = `${time.year}-${time.month}-${time.date} 星期${time.day}`

      numHH.innerText = `${time.hh}`;

      numMM.innerText = `${time.mm}`;

      numSS.innerText = `${time.ss}`;

    }, 1000)

  </script>

</body>

</html>

1.2、utils.js

function getHms() {

  let dayList = [

    { day: 0, text: '日' },

    { day: 1, text: '一' },

    { day: 2, text: '二' },

    { day: 3, text: '三' },

    { day: 4, text: '四' },

    { day: 5, text: '五' },

    { day: 6, text: '六' },

  ];

  let year = 0, month = 0, date = 0, day = 0, h = 0, m = 0, s = 0;

  let d = new Date();

  year = d.getFullYear();

  month = d.getMonth() + 1;

  date = d.getDate();

  day = d.getDay();

  h = d.getHours();

  m = d.getMinutes();

  s = d.getSeconds();

  h = h >= 12 ? h - 12 : h;

  return {

    year: year+'',

    month: month < 10 ? '0' + month : month+'',

    date: date < 10 ? '0' + date : date+'',

    day:  dayList.find(item => item.day == day).text,

    h: h,

    hh: h < 10 ? '0' + h : h+'',

    m: m,

    mm: m < 10 ? '0' + m : m+'',

    s: s,

    ss: s < 10 ? '0' + s : s+'',

  };

}

1.3、clock.css

.clock {

  position: relative;

  background-color: #222;

  display: flex;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  border: 10px solid rgb(156, 154, 154);

  align-items: center;

  justify-content: center;

  margin: 50px auto;

}

.circle {

  position: absolute;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background-color: #fff;

  z-index: 2;

  display: flex;

  align-items: center;

}

.circle > div {

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background-color: red;

  margin: 0 auto;

  z-index: 2;

}

/* 时针 */

.line-h {

  display: none;

  position: absolute;

  width: 46px;

  height: 12px;

  border-radius: 6px;

  background-color: transparent;

}

.line-h div {

  width: 110px;

  background: #fff;

  height: 12px;

  border-radius: 6px;

}

/* 分针 */

.line-m {

  display: none;

  position: absolute;

  width: 46px;

  height: 8px;

  border-radius: 4px;

  background-color: transparent;

}

.line-m div {

  width: 150px;

  background: #fff;

  height: 8px;

  border-radius: 4px;

}

/* 秒针 */

.line-s {

  display: none;

  position: absolute;

  width: 60px;

  height: 4px;

  border-radius: 2px;

  background-color: transparent;

  z-index: 2;

}

.line-s div {

  width: 160px;

  background: red;

  height: 4px;

  border-radius: 2px;

}

/* 12个小时的点位 */

.dotH {

  position: absolute;

  height: 6px;

  width: 300px;

  background: #fff;

}

.dotH div {

  position: absolute;

  height: 8px;

  top: -1px;

  left: 15px;

  width: 270px;

  background-color: #222;

}

.dotH1 {

  transform: rotate(0deg);

}

.dotH2 {

  transform: rotate(30deg);

}

.dotH3 {

  transform: rotate(60deg);

}

.dotH4 {

  transform: rotate(90deg);

}

.dotH5 {

  transform: rotate(120deg);

}

.dotH6 {

  transform: rotate(150deg);

}

.num-date {

  position: absolute;

  top: 60%;

  color: #fff;

  font-size: 14px;

}

.num-time {

  position: absolute;

  top: 72%;

  color: #222;

  font-size: 14px;

  direction: flex;

}

.num-time > span {

  flex: 1;

  background-color: #fff;

  margin: 0 1px;

  padding: 4px;

  box-shadow: inset 0 0 5px 1px #2c3b3e;

}

/* 60个分的点 */

.dotM {

  position: absolute;

  height: 3px;

  width: 300px;

  background: #fff;

}

.dotM div {

  position: absolute;

  height: 5px;

  top: -1px;

  left: 5px;

  width: 290px;

  background-color: #222;

}

.dotM1 {

  transform: rotate(6deg);

}

.dotM2 {

  transform: rotate(12deg);

}

.dotM3 {

  transform: rotate(18deg);

}

.dotM4 {

  transform: rotate(24deg);

}

.dotM5 {

  transform: rotate(36deg);

}

.dotM6 {

  transform: rotate(42deg);

}

.dotM7 {

  transform: rotate(48deg);

}

.dotM8 {

  transform: rotate(54deg);

}

.dotM9 {

  transform: rotate(66deg);

}

.dotM10 {

  transform: rotate(72deg);

}

.dotM11 {

  transform: rotate(78deg);

}

.dotM12 {

  transform: rotate(84deg);

}

.dotM13 {

  transform: rotate(96deg);

}

.dotM14 {

  transform: rotate(102deg);

}

.dotM15 {

  transform: rotate(108deg);

}

.dotM16 {

  transform: rotate(114deg);

}

.dotM17 {

  transform: rotate(126deg);

}

.dotM18 {

  transform: rotate(132deg);

}

.dotM19 {

  transform: rotate(138deg);

}

.dotM20 {

  transform: rotate(144deg);

}

.dotM21 {

  transform: rotate(156deg);

}

.dotM22 {

  transform: rotate(162deg);

}

.dotM23 {

  transform: rotate(168deg);

}

.dotM24 {

  transform: rotate(174deg);

}

/* 数字 */

.num {

  position: absolute;

  width:274px;

  height: 26px;

}

.num div {

  position: absolute;

  color: #fff;

  width: 26px;

  height: 26px;

  line-height: 26px;

  text-align: center;

}

.num div:first-child {

  top: 0;

  left: 0;

}

.num div:last-child {

  top: 0;

  right: 0;

}

.num1_7 {

  transform: rotate(120deg);

}

.num1_7 div {

  transform: rotate(-120deg);

}

.num2_8 {

  transform: rotate(150deg);

}

.num2_8 div {

  transform: rotate(-150deg);

}

.num3_9 {

  transform: rotate(180deg);

}

.num3_9 div {

  transform: rotate(-180deg);

}

.num4_10 {

  transform: rotate(210deg);

}

.num4_10 div {

  transform: rotate(-210deg);

}

.num5_11 {

  transform: rotate(240deg);

}

.num5_11 div {

  transform: rotate(-240deg);

}

.num6_12 {

  transform: rotate(270deg);

}

.num6_12 div {

  transform: rotate(-270deg);

}

PS：

1、写完后发现，其实对于时针的12个点位和分针的48个点位（其中有12个和时针点位重合）可以用js生成html，这样就可以减少html代码和css代码

2、线上链接地址：http://lbrzj.com/clock.html

html+css实现指针时钟的更多相关文章

  1. CSS3使用Animation steps属性实现指针时钟效果

    本篇文章由:http://xinpure.com/css3-animation-steps-properties-for-analogue-effects/ animation 默认以 ease 方式 ...

  2. CSS鼠标指针cursor样式

    参考来源:W3SCHOOL 有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现: url: 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光 ...

  3. 纯js+html+css实现模拟时钟

    前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. <!DOCTYPE html> <html lang="en"> <head> & ...

  4. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

  5. CSS/HTML 改变鼠标指针形状

    改变鼠标指针形状的方法有两种:第一种:用的来改变鼠标指针形状.另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状 我们先来看第一种:用来改变鼠标指针形状. 有些 ...

  6. JavaScript+svg绘制的一个动态时钟

    结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...

  7. JavaScript之“创意时钟”项目

    “时钟展示项目”说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知 ...

  8. css3 简易时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 圆盘时钟效果 原生JS

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

  10. css学习（2）-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

随机推荐

  1. NC19910 [CQOI2007]矩形RECT

    题目链接 题目 题目描述 给一个a*b矩形,由a*b个单位正方形组成.你需要沿着网格线把它分成分空的两部分,每部分所有格子连通,且至少有一个格子在原矩形的边界上."连通"是指任两个 ...

  2. NC24438 [USACO 2016 Ope P]262144

    题目链接 题目 题目描述 Bessie likes downloading games to play on her cell phone, even though she does find the ...

  3. 手动实现apply、call、bind

    手动实现apply.call.bind 每个Function对象都存在apply().call().bind()方法,其作用都是可以在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函 ...

  4. Js中的堆栈

    Js中的堆栈 堆heap是动态分配的内存,大小不定也不会自动释放,栈stack为自动分配的内存空间,在代码执行过程中自动释放. 栈区 在栈内存中提供一个供Js代码执行的环境,关于作用域以及函数的调用都 ...

  5. SpringCloud Config配置中心实战

    介绍 本文以理论结合实践编写,篇幅较长,各位看官保持耐心:),部分内容引用自网络. 什么是配置中心? 当微服务过多的时候,每个微服务的配置很难集中管理.SpringCloud Config通过git代 ...

  6. Python之猜数字游戏

    说明: 本例改编自<Python编程快速上手>.例子很简单我就不多说了 直接上代码,给初学python练手用. 给你6次机会猜对一个预先生成好的1-20之间的整数.覆盖一下知识点: 条件语 ...

  7. win32-使用GDI+缩放图像

    滑动鼠标滚轮可以改变图像大小 #include <windows.h> #include <tchar.h> #include <Urlmon.h> // URLD ...

  8. [BUUCTF][Web][HCTF 2018]WarmUp 1

    这题已经标识为php 代码审计题,那么需要搞到源码才行 打开靶机对应的url,展示的是一张笑脸图片 右键查看网页源代码 <!DOCTYPE html> <html lang=&quo ...

  9. Eharts立体柱状图

    一下这三个div大小不一样 为了保证每次柱状图渲染正确 添加key <div class="echart1" id="dangerChart1" key= ...

  10. linux下python3环境安装（源码编译的方式安装）

    1.将压缩包上传到/usr/local/ 2.解压压缩包 tar -xzvf Python-3.6.6.tgz 3.装一些编译源码需要的依赖文件 yum -y install gcc make cma ...