浅谈时钟的生成(js手写代码)

在生成时钟的过程中自己想到布置表盘的写法由这么几种:

当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现

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 来定指针转动点一定要定准

时间: 2024-10-23 08:21:08

浅谈时钟的生成(js手写代码)的相关文章

【转载】浅谈游戏开发之2D手游工具

浅谈游戏开发之2D手游工具 来源:http://www.gameres.com/459713.html 游戏程序 平台类型: iOS Android  程序设计: 其它  编程语言:   引擎/SDK: 其它  全球手游行业规模将突破250亿美元,越来越多的开发者开始进入手游研发领域,而作为一名菜鸟,很多时候,如果没有其他开发者的建议,会走很多弯.独立工作室Sheado.net公司的Chad Ata在博客中分享了他们从一开始进入手游研发到如今四年多以来积累的经验,希望可以给新入行者提供一些帮助.

Hibernate自动生成DO手写DAO的注意事项

自动生成DO,手写DAO: Myeclipse添加Hibernate支持:注意别勾abstract 生成DO:进入MyEclipse的Database Explorer右键要操作的表(注意一定要有主键)点击Hibernate Reverse,其中Id选择native. 手写DAO: Configuration con = new Configuration().configure();//构造核心类 SessionFactory factory = con.buildSessionFactory

js手写&#39;Promise&#39;

/* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(executor) {// 执行器 this.status = 'pending'; this.value = undefined; this.reason = undefined; this.fulfilledCallback = []; this.rejectCallback = []; let resolve = (value)=>{ if(this.

UI到底应该用xib/storyboard完成,还是用手写代码来完成?

UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 参考文章: <关于代码手写UI,xib和StoryBoard> http://blog.csdn.net/likendsl/article/details/38731333 <代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧> ht

我要好offer之 str/mem系列手写代码

1. str*系列手写代码 a. 一定要注意末尾'\0'的处理,切记切记 b. 一定要对输入做有效性判断,多用断言就是了 int Strlen(const char* str) { assert(str != NULL); const char* tmp = str; while (*tmp != '\0') { ++tmp; } return tmp - str; } char* Strcpy(char* dst, const char* src) { assert(dst != NULL &

如果选择构建ui界面方式,手写代码,xib和StoryBoard间的博弈

代码手写UI这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用. 大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代码UI可以说具有最好的代码重用性.如果你的目的是写一些可以高度重用的控件提供给其他开发者使用,那毫无疑问最好的选择应该是使用代码来完成UIView的子类.这样进一步的修改和其他开发者在使用时,都会方便不少.使用代码也是最为强大的,会有xib或者StoryBoard做不了的事情,但是使用代码最终一定能

手写代码UI,xib和StoryBoard间的的优劣比较

在UI制作方面,逐渐分化三种主要流派:使用代码手写UI:使用单个xib文件组织viewController或者view:使用StoryBoard来通过单个或很少的几个文件构建UI.三种方式各有优劣,也各有自己最适用的场合. 一.手写代码UI 1.优势 √  适合大型项目大规模使用,利于版本管理.追踪改动以及代码合并 √  最好的代码重用性 2.遗憾 √  慢,开发周期长,维护代码复杂 √  自动布局AutoLayout困难 二.xib文件组织viewController或者view 1.优势 √

.netER的未来路,关于基础是否重要和应该自己手写代码吗?

http://www.cnblogs.com/onepiece_wang/p/5558341.html#!comments 引用"基础知识的学习,一开始可能是背书,但是在后续若干年的工作过程中,在写代码时有没有想过为什么代码要写成这样子." 谁没有去想过呢?我深究过,但后来放弃了,原因很简单,因为我深究后发现,1+1等于2 苹果就是叫苹果.我去思考1+1为什么等于2 苹果为什么叫苹果.研究透后才发现只是多此一举,很浪费时间也没有实质性的作用.因为他就叫那个苹果名字,1+1就是等于2,我

iOS UICollectionView手写代码实现步骤

// //  ViewController.h //  collectionView手写代码 // //  Created by yangxiuying on 14/11/28. //  Copyright (c) 2014年 lanjiying. All rights reserved. // #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UICollectionViewDataSource,U