css画钟表_利用css+原生js制作简单的钟表

这篇文章主要为大家详细介绍了如何利用css+原生js制作简单的钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

利用css+原生js制作简单的钟表。效果如下所示

实现该效果，分三大块：html、javascript、css

html部分html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多，采用jvascript生成

时钟

css部分开始代码之前，有一些css的属性需要了解，比如定位(position)，边框圆角(border-radius),变换(transform)等

position属性

position属性规定元素的定位类型，有五个值：absolute、fixed、relative、static、inherit,默认为static，即没有定位，元素按正常文档流显示；这里主要用到的是absolute和relative

absulte值，将元素设置成绝对定位，相对于static定位意外的第一个上级元素进行定位，位置可以通过'left'、'top'、'right'、'bottom'属性进行定位；如果上级元素都是static定位，则相对于body元素的位置进行定位

本例中，设定最外层的div clock为relative，所有下级元素均设定为absolute绝对定位，然后通过设置left、top等属性的值，确定其相对于clock的位置。

border-radius属性border-radius属性向元素添加圆角边框，可以设置四个圆角的大小，本例中使用该属性将clock元素设置成一个圆

此处写了一个示例：4个div元素，宽高都是100px，border-radius不同时的效果：

transform属性

transform属性向元素应用2D或3D旋转，该属性允许我们对元素进行旋转、缩放、移动、或倾斜。本例中时针、分针、秒针、刻度等均用transform属性设置旋转；另外，transform-origin属性可以设置元素的基点位置

css部分的代码

/* 全局 */

*{

margin:0;

padding:0;

}

.clock{

width:400px;

height:400px;

border:10px solid #333;

box-shadow: 0px 0px 20px 3px #444 inset;

border-radius:210px;

position:relative;

margin:5px auto;

z-index:10;

background-color:#f6f6f6;

}

/* 时钟数字 */

.clock-num{

width:40px;

height:40px;

font-size:22px;

text-align:center;

line-height:40px;

position:absolute;

z-index:8;

color