浅谈时钟的生成(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 巧妙去除数组中的重复项
Jan 25 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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开发GUI
2006/10/09 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
大学毕业生个人自荐书
2014/07/02 职场文书
天那边观后感
2015/06/09 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS