前端新手项目练习之钟表

前端新手项目练习值钟表

前端新手记录自己在网络上找到的前端练习项目。

项目简介

一个简单的钟表，有刻度和数字，利用了一些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。