前端新手项目练习值钟表
前端新手记录自己在网络上找到的前端练习项目。
项目简介
一个简单的钟表，有刻度和数字，利用了一些CSS3特效来实现。
钟表.gif
html部分
在html中写好钟表、圆心和时分秒针,其它标签较为复杂，需通过javascript添加。
钟表
CSS部分
CSS部分使用了很多的CSS3特效，用来实现钟表并且更好看一些。
* {
margin: 0;
padding: 0;
}
.clock {
width: 400px;
height: 400px;
border: 10px solid #333;
box-shadow: 0px 0px 20px 3px #444 inset;
border-radius: 50%;
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: #555;
font-family: fantasy; /* 字体 */
}
.em_num {
font-size: 28px;
}
.clock-line {
position: absolute;
z-index: 20;
}
.hour-line {
width: 100px;
height: 4px;
top: 198px;
left: 200px;
background-color: #000;
border-radius: 2px;
transform-origin: 0 50%;
box-shadow: 1px -3px 8px 3px #aaa;
}
.minute-line {
width: 130px;
height: 2px;
top: 199px;
left: 190px;
background-color: #000;
transform-origin: 7.692% 50%;
box-shadow: 1px -3px 8px 1px #aaa;
}
.second-line {
width: 170px;
height: 1px;
top: 199.5px;
left: 180px;
background-color: #f60;
transform-origin: 11.765% 50%;
box-shadow: 1px -3px 7px 1px #bbb;
}
.origin {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #000;
position: absolute;
top: 190px;
left: 190px;
z-index: 14;
}
/* 刻度 */
#list {
list-style: none;
position: relative;
height: 100%;
margin: 0;
padding: 0;
}
#list li {
list-style:none;
width: 2px;
height: 12px;
position: absolute;
left: 199px;
top: 4px;
transform-origin: center 196px; /* 相对元素左上角的位置 */
background-color:#555;
}
#list li:nth-child(5n+1) {
width: 4px;
height: 15px;
}
z-index属性
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。比如时分秒针应该在圆心的前面。
font-family属性
font-family 规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
- 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
- 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
box-shadow属性
box-shadow 属性向框添加一个或多个阴影。用好了这个属性可以让你的图像更加漂亮和精致。值和描述如下表所示。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值。 |
| v-shadow | 必需。垂直阴影的位置，允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |
如果不设置阴影类型，默认为投影效果，当设置为inset时，改为内投影。X轴偏移和Y轴偏移定义阴影偏移距离，必须设置，不需要偏移可置为0.模糊距离和硬硬的尺寸和颜色均为可选值，默认是黑色实影。
transform属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。本项目主要用到的是2D旋转，当值设置为rotate(angle)时定义2D旋转，其中参数为旋转的角度。
transform-origin属性
该属性必须和transform属性一起使用，用来设置旋转的基点，不设置的话默认为元素中心。在2D旋转中，两个参数分别是X轴和Y轴的位置，描述如下。
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于X轴何处，可选值：left,center,right,也可以使用数字或百分数，相对元素最左侧定位。 |
| y-axis | 定义视图被置于Y轴何处，可选值：top,center,bottom,也可以使用数字或百分数，相对元素最顶侧定位。 |
javascript部分
javascript部分一方面是为3个表针添加旋转函数，让其根据当前时间旋转，一方面是设置一些在CSS中设置起来比较复杂的样式。
通过本项目我们可以了解到javascript中的DOM操作。可以通过createDocument函数创建节点，然后通过appendChild将其放在某个父元素之下。还可以通过innerHTML直接在节点内部添加HTML。
window.onload = function() {
initNumXY(200, 160, 40, 40);
var hour_line = document.getElementById("hour-line");
var minute_line = document.getElementById("minute-line");
var second_line = document.getElementById("second-line");
function setTime() {
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes() + s / 60;
var h = date.getHours() + m / 60;
hour_line.style.transform = " rotate( " + (h * 30 - 90) + "deg ) ";
minute_line.style.transform = " rotate( " + (m * 6 - 90) + "deg ) ";
second_line.style.transform = " rotate( " + (s * 6 - 90 ) + "deg ) ";
}
setTime();//设置时间，不加这句开始会有一下停顿
setInterval(setTime, 1000);
//定位数字的位置，R：大圆的半径，r：数字所在位置小圆的半径，w: 数字的宽， h:数字的高
function initNumXY(R, r, w, h) {
var numXY = [
{
"left" : R + 0.5 * r - 0.5 * w,
"top" : R - 0.5 * r * 1.73205 - 0.5 * h
},
{
"left" : R + 0.5 * r * 1.73205 - 0.5 * w,
"top" : R - 0.5 * r - 0.5 * h
},
{
"left" : R + r - 0.5 * w,
"top" : R - 0.5 * h
},
{
"left" : R + 0.5 * r * 1.73205 - 0.5 * w,
"top" : R + 0.5 * r - 0.5 * h
},
{
"left" : R + 0.5 * r - 0.5 * w,
"top" : R + 0.5 * r * 1.73205 - 0.5 * h
},
{
"left" : R - 0.5 * w,
"top" : R + r - 0.5 * h
},
{
"left" : R - 0.5 * r - 0.5 * w,
"top" : R + 0.5 * r * 1.73205 - 0.5 * h
},
{
"left" : R - 0.5 * r * 1.73205 - 0.5 * w,
"top" : R + 0.5 * r - 0.5 * h
},
{
"left" : R - r - 0.5 * w,
"top" : R - 0.5 * h
},
{
"left" : R - 0.5 * r * 1.73205 - 0.5 * w,
"top" : R - 0.5 * r - 0.5 * h
},
{
"left" : R - 0.5 * r - 0.5 * w,
"top": R - 0.5 * r * 1.73205 - 0.5 * h
},
{
"left" : R - 0.5 * w,
"top" : R - r - 0.5 * h
}
];
var clock = document.getElementById("clock");
//钟表上添加数字
for(var i = 1; i <= 12; i++) {
if(i % 3 == 0) {
clock.innerHTML += "" + i + "";
} else {
clock.innerHTML += "" + i + "";
}
}
var clock_num = document.getElementsByClassName("clock-num");
//定位
for(var i = 0; i < clock_num.length; i++) {
clock_num[i].style.left = numXY[i].left + 'px';
clock_num[i].style.top = numXY[i].top + 'px';
}
//钟表上添加刻度
var ul = document.createElement("ul");
ul.setAttribute("id", "list");
clock.appendChild(ul);
for(var i = 0; i < 60; i++) {
var li = document.createElement("li");
li.style.transform = "rotate( "+ i * 6 +"deg )";
ul.appendChild(li);
}
}
}
通过这个项目对CSS3有了更多的了解，感觉还是很强大的。项目源码请查看https://github.com/yunkai123/WebProjectStudy/tree/master/tools/clock。