浅谈时钟的生成(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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
常规表格多表头查询示例
Feb 21 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
详解webpack babel的配置
Jan 09 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
jQuery实现高级检索功能
May 28 jQuery
javascript自定义右键菜单插件
Dec 16 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
vue实现评论列表功能
2019/10/25 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python 返回汉字的汉语拼音
2009/02/27 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python命令行解析模块详解
2018/02/01 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
python全栈开发语法总结
2020/11/22 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
园艺师求职信
2014/03/10 职场文书
南京导游词
2015/02/03 职场文书
英语教师求职信范文
2015/03/20 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2016党员入党决心书
2015/09/22 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Nginx实现会话保持的两种方式
2022/03/18 Servers
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis