浅谈时钟的生成(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针对DOM的应用实例(一)
Apr 15 Javascript
js浮动图片的动态效果
Jul 10 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
angular1配合gulp和bower的使用教程
Jan 19 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 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读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
PHP如何将XML转成数组
2016/04/04 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python中的类学习笔记
2014/09/23 Python
Java及python正则表达式详解
2017/12/27 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
运动会800米加油稿
2014/02/22 职场文书
五四演讲稿范文
2014/09/03 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers