浅谈时钟的生成(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 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 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
Zerg基本策略
2020/03/14 星际争霸
国内php原创论坛
2006/10/09 PHP
PHP 高手之路(三)
2006/10/09 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
tensorflow 变长序列存储实例
2020/01/20 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
python中字符串的编码与解码详析
2020/12/03 Python
安全生产一岗双责责任书
2014/07/28 职场文书
岗位说明书怎么写
2014/07/30 职场文书
国际贸易系求职信
2014/08/09 职场文书
投资意向协议书
2015/01/29 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
2015年暑期见闻
2015/07/14 职场文书
运动员入场词
2015/07/18 职场文书