在生成时钟的过程中自己想到布置表盘的写法由这么几种：

当然利用那种模式都可以实现，所以我们要用一个最好理解，代码有相对简便的方法实现

1、利用三角函数

　　用js在三角函数布置表盘的过程中有遇见到这种情况：是在表盘的刻度处，利用三角函数计算具体的值时不能得到整数，需要向上或者向下取整，这样无形中就会存在些许偏差，而且这样的偏差难利用样式来调整到位，即使最终效果都可以实现，但是细微处的缝隙和角度的偏差都会影响整体的视觉体验，作为一名程序开发人员，这样的视觉体验很难让别人认可，放弃。

2、利用遮罩层

　　js利用遮罩层，主要还是在表盘的刻度处，表盘的刻度有长和短，每5个刻度都有一根较长的刻度，这样我们利用遮罩层遮住的刻度的长短都是一致的，很难继续调整其余的刻度所以也放弃。

3、利用定位以及（父子级关系）（推荐）

　 利用定位以及父子级关系的方法我觉得最好理解和上手，在这里为大家分享一下。下面是实现代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      * {
        margin: 0;
        padding: 0;
      }
      #clock {
        width: 600px;
        height: 600px;
        border: 4px solid lightgray;
        margin: auto;
        position: relative;
        border-radius: 50%;
      }
      #scale {
        width: 20px;
        height: 100%;
        position: absolute;
        left: 50%;
        margin-left: -10px;
        /*background: green;*/
      }
      #point {
        width: 4px;
        height: 10px;
        background: lightgray;
        margin: auto;
      }
      #number {
        width: 20px;
        height: 20px;
        margin-top: 5px;
        /*background: red;*/
        font-size: 20px;
        text-align: center;
        line-height: 20px;
      }
      #hour {
        width: 12px;
        height: 180px;
        background: red;
        border-radius: 6px;
        transform-origin: 50% 150px;
        position: absolute;
        top: 150px;
        left: 50%;
        margin-left: -6px;
      }
      #minute {
        width: 8px;
        height: 250px;
        background: orange;
        position: absolute;
        border-radius: 4px;
        transform-origin:  50% 200px;
        top: 100px;
        left: 50%;
        margin-left: -4px;
      }
      #second {
        width: 4px;
        height: 360px;
        background: red;
        border-radius: 2px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -2px;
        transform-origin: 50% 300px;
        z-index: 100;
      }
    </style>
  </head>
  <body>
    <div id="clock">
      <div id="hour">

</div>
      <div id="minute">

</div>
      <div id="second">

</div>
    </div>
  </body>
  <script type="text/javascript">
    var clock = document.getElementById('clock');
    var hour = document.getElementById('hour');
    var minute = document.getElementById('minute');
    var second = document.getElementById('second');

function surface() {
      var currentDate = new Date();
      var hours = currentDate.getHours();
      var minutes = currentDate.getMinutes();
      var seconds = currentDate.getSeconds();

seconds = hours * 3600 + minutes * 60 + seconds;

hour.style.transform = 'rotate('+seconds / 120+'deg)';
      minute.style.transform = 'rotate('+seconds * 0.1+'deg)';
      second.style.transform = 'rotate('+seconds * 6+'deg)';

}
    setInterval('surface()', 1000);

for (var i = 1; i < 61; i++) {
      var scale = document.createElement('div');
      scale.id = 'scale';
      scale.style.transform = 'rotate('+i * 6+'deg)';
      clock.appendChild(scale);

var point = document.createElement('div');
      point.id = 'point';
      scale.appendChild(point);

var number = document.createElement('div');
      number.id = 'number';
      number.style.transform = 'rotate(-'+i * 6+'deg)'
      if (i % 5 == 0) {
        number.innerHTML = i / 5;
        point.style.height = '15px';
      }
      scale.appendChild(number);
    }
  </script>
</html>

校正中需要注意：

1、以下是分步实现的效果图，最后做到细节处紧密贴合，不用其他的方法在对她进行微调，当样式布局全部完成之后就可以获取当前的时间加以校正，在校正的过程中有这样一个问题，希望大家能注意： 时针的转动角度不能以小时为单位来计算，例如：9:58 这时的时针指的位置是9，当10 ：00 时，时针以下跳转到10的位置，所以时针的角度要以分钟或者秒来计算，分针的角度跳转要以分钟或者秒来计算，秒针就是每秒跳转6度。

2、还有一点要注意，三个指针的转动圆心问题，利用transform-origin 来定指针转动点一定要定准

浅谈时钟的生成(js手写代码)的更多相关文章

  1. 浅谈时钟的生成(js手写代码)(非原创)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

  2. 【转载】浅谈游戏开发之2D手游工具

    浅谈游戏开发之2D手游工具 来源:http://www.gameres.com/459713.html 游戏程序 平台类型: iOS Android  程序设计: 其它  编程语言:   引擎/SDK ...

  3. 谁还没遇上过NoClassDefFoundError咋地——浅谈字节码生成与热部署

    谁还没遇上过NoClassDefFoundError咋地--浅谈字节码生成与热部署 前言 在Java程序员的世界里,NoClassDefFoundError是一类相当令人厌恶的错误,因为这类错误通常非 ...

  4. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  5. 原生html、js手写 radio与checkbox 美化

    原生html.js手写 radio与checkbox   美化 html <!DOCTYPE html> <html> <head> <meta charse ...

  6. Python测试开发-浅谈如何自动化生成测试脚本

    Python测试开发-浅谈如何自动化生成测试脚本 原创: fin  测试开发社区  前天 阅读文本大概需要 6.66 分钟. 一 .接口列表展示,并选择 在右边,点击选择要关联的接口,区分是否要登录, ...

  7. 常见的JS手写函数汇总（代码注释、持续更新）

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...

  8. 前端面试手写代码——JS函数柯里化

    目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Cu ...

  9. UI到底应该用xib/storyboard完成，还是用手写代码来完成？

    UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 ...

随机推荐

  1. Android快乐贪吃蛇游戏实战项目开发教程-06虚拟方向键（五）绘制方向键箭头

    本系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html本系列教程项目源码GitHub地址:https://github.com/jack ...

  2. 分享一个与ABP配套使用的代码生成器源码

    点这里进入ABP系列文章总目录 分享一个与ABP配套使用的代码生成器源码 真对不起关注我博客的朋友, 因最近工作很忙, 很久没有更新博客了.以前答应把自用的代码生成器源码共享出来, 也一直没有时间整理 ...

  3. mako模板调试与使用技巧

    django默认的模板太不灵活,想把一个数字0.15显示成15%都得费不少劲,太不爽!!! 网上查阅了几个模板系统,有Jinja2等等,最后发现mako能够直接支持python的语句,最为灵活,果断选 ...

  4. 特殊的数据类型: bit、sql_variant、sysname

    在SQL Server中,特殊的数据类型主要有三个,分别是:bit.sql_variant 和 sysname 一,bit bit类型,只有三个有效值:0,1 和 null,字符串true或false ...

  5. EXISTS 引入子查询时，在选择列表中只能指定一个表达式

  6. JavaScript:正则表达式 前瞻

    正向前瞻:用来捕获出现在特定字符之前的字符,只有当字符后面跟着某个特定字符才去捕获它.(?=) 负向前瞻:它用匹配只有当字符后面不跟着某个特定字符时才去匹配它.(?!) 在执行前瞻和负向前瞻之类的运算 ...

  7. webapi+Task并行请求不同接口实例

    标题的名称定义不知道是否准确,不过我想表达的意思就是使用Task特性来同时请求多个不同的接口,然后合并数据:我想这种场景的开发对于对接过其他公司接口的人不会陌生,本人也是列属于之内,更多的是使用最原始 ...

  8. MUI APP关于页面之间的传值，plusready和自定义事件

    最近在用MUI开发这个APP,发现有时候这个plusready不起作用,表现在,这个页面如果重复打开,这个plusready就进不去,然后上一个页面传过来的值,就没法接收了.这个经过MUI官方确认,是 ...

  9. java8 lamda快速入门

    Lambda语法详解 我们在此抽象一下lambda表达式的一般语法: 1 (Type1 param1, Type2 param2, ..., TypeN paramN) -> { 2   sta ...

  10. nodejs中流(stream)的理解

    nodejs的fs模块并没有提供一个copy的方法,但我们可以很容易的实现一个,比如: var source = fs.readFileSync('/path/to/source', {encodin ...