浅谈时钟的生成(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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
js 小贴士一星期合集
Apr 07 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 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
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
django模板结构优化的方法
2019/02/28 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
pytorch forward两个参数实例
2020/01/17 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
Internet体系结构
2014/12/21 面试题
护理专业自荐信
2013/12/03 职场文书
求职信写作要突出重点
2014/01/01 职场文书
会计专业求职信范文
2014/03/16 职场文书
幼儿园教师考核评语
2014/12/31 职场文书