浅谈时钟的生成(js手写简洁代码)


Posted in Javascript onAugust 20, 2016

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

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

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手写简洁代码)

 

浅谈时钟的生成(js手写简洁代码)

 

浅谈时钟的生成(js手写简洁代码)

 

 

浅谈时钟的生成(js手写简洁代码)

 

浅谈时钟的生成(js手写简洁代码)

 

浅谈时钟的生成(js手写简洁代码)

以上这篇浅谈时钟的生成(js手写简洁代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
JQuery学习总结【二】
Dec 01 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 #Javascript
再谈Javascript中的异步以及如何异步
Aug 19 #Javascript
用原生js统计文本行数的简单示例
Aug 19 #Javascript
jQuery购物网页经典制作案例
Aug 19 #Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 #Javascript
js实现select选择框效果及美化
Aug 19 #Javascript
You might like
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
现金出纳岗位职责
2014/03/15 职场文书
终止合同协议书
2014/04/17 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
家长会后的感想
2015/08/11 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python