网页小配件之时钟

网页小配件之时钟

参考html+css+js 动态时钟

---

---

动机

---

• 今天在网上浪，想试试搜索引擎能不能找到自己在csdn博客上写的文章，于是打了一篇自己写过的文章的名称“网页小配件之日历”，发现。。。。没搜到，结果却搜到了有关实现时钟的文章上去了，看着时钟也挺有意思的，所以看了一波资料，学了一波原理后，也自己动手做一个。

过程

---

结构——HTML

• 首先时钟作为一个整体用div定义，其中包括了时钟中心点、时钟数、时针、分针、秒针这些静态的显示元件，当然还有刻度也是静态的，但60根刻度线要一个一个写出来真是难为我胖虎了，所以它还是放到js文件里写吧(循环)。还可以看到下面时钟有个类名是clockbox，另一个是scale-2x，这里的clockbox用于在css中定义时钟的通用样式，而scale-2x则是时钟的大小，相同的还有scale-1x、scale-3x，这是我自己设计的3种大小规格的时钟，只要在clock的div中写上对应的类名即可。

<div class="clockbox scale-2x" id="clock"> 
    <!-- 时钟中心点 -->  
    <div class="clockcenter"></div>  
    <!-- 时钟数 -->  
    <div class="clocknum">  
        <div class="num">12</div>  
        <div class="num">1</div>  
        <div class="num">2</div>  
        <div class="num">3</div>  
        <div class="num">4</div>  
        <div class="num">5</div>  
        <div class="num">6</div>  
        <div class="num">7</div>  
        <div class="num">8</div>  
        <div class="num">9</div>  
        <div class="num">10</div>  
        <div class="num">11</div>  
    </div>  
    <div class="hourhand" id="hourhand"></