浅谈时钟的生成(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 相关文章推荐
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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
PHP文件下载类
2006/12/06 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
js tab效果的实现代码
2009/12/26 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
七年级英语教学反思
2014/01/15 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
超市创业计划书
2014/09/15 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
教师节座谈会主持词
2015/07/03 职场文书
教育教学工作反思
2016/02/24 职场文书