浅谈时钟的生成(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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php实现zip文件解压操作
2015/11/03 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
vue v-model动态生成详解
2018/06/30 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
Python动态加载模块的3种方法
2014/11/22 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Django视图扩展类知识点详解
2019/10/25 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
Oracle的内存结构(Memory structures)
2015/06/10 面试题
毕业生自我鉴定实例
2014/01/21 职场文书
幼儿教育感言
2014/02/05 职场文书
领导干部保密承诺书
2014/08/30 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
hive数据仓库新增字段方法
2022/06/25 数据库