序言

先贴上另一名开发人员的书名门牌号，只不过里头表明的是2种艺术风格的计时器，一类为现代的雕件，一类为位数计时器，我就合二为一来表明了。这儿再除此之外改了个相同深蓝色的长方形计时器，对位数计时器也展开了改良。

在最终会释放出源代码，给讨厌科学研究的爸爸妈妈两个参照。总之咯，最合适却是他们能课堂教学呵呵。

此讲义版是如前所述书名门牌号基础上展开小的修正而来，采用的是LESS的Mixin标识符形式，使中后期修正大小不一及色调会更为方便快捷，只须要修正相同模块即可。

假如你对LESS和mixin不太介绍，提议先自学基本知识。less校对css的应用软件，所推荐采用koala。

第二步，建立文档

内部结构示意图右图，CSS里建立style.less就能了（校对提及会聚合css文档），除此之外建立resource文档夹，里头能再建立mixin_clock.less（不须要校对），文档取名能依照他们的工程项目市场需求。clock.html中恒定提及style.css文档就能了。

把css产品目录拖到koala应用软件中，因此迈入style.less左边的source map，这种在应用程序上，f12能看见相关联的标识符边线，方便快捷修正。

style.less里的提及标识符，校对后就能自动聚合同名.css文档了：

//公共文档夹根产品目录 @resource_path: ../resource; // 组件扩展 @import @{resource_path}/mixin_clock;

等以后resource里组件多的话，也能单独留两个提及的文档。接下来就能正式开工了。

第二步，按原讲义录入内容

原来的css样式的部分，全都放在mixin_clock.less文档中，因为是提及因此一直在校对的，所以都能恒定表明。

这儿要提几点顺便的修正

1、border-radius，假如是正圆的，则改为50%，而不是具体的数值。

2、background: linear-gradient(top, #f9f9f9, #666)，里头的top，改为180deg，因为在部分chrome中可能会报错，而具体的角度不会

3、有些div用了position: absolute，就顺便加上z-index值，具体位数，依照层叠的前后展开设置

4、将最终的位数计时器和雕件拆分（假如你想和在一起的话，提议改为年月日可能更实用）

第三步，修正为LESS的内部结构写法

采用less有个好处就是不须要反复写父级名称，部分的修正基础内部结构如下：

// 表盘 .frame_face { … &:before { … ｝ &:before { … ｝｝

tips: 因为要集成到别的框架中，他们定义的名称，建议统一改用下划线，以作区分。

这儿的&，相当于.frame_face:before{}

第四步，提取公共部分，改为变量，并改成Mixin形式调用

这一步比较重要，这也是LESS比写标准CSS最显著的优势，当然现在CSS也能写变量，但是远没有LESS写的方便快捷。

将里头一些须要以后修正的都提取出来作为变量，我也大致罗列下修正的地方：

1、比如钟的大小不一，假如修正的话，里头的大小不一也都须要跟着修正，所以上面提到最合适是按百分比作为相对的数值，那么修正两个地方，相对的部分也能跟着展开修正。

2、涉及到的色调，比如深蓝色，文字色调等。总之咯这儿涉及的地方比较多，并非所有的都须要提取出来，依照他们的市场需求方可。

3、倒角数值也能取出来，比如最终须要两个长方形的计时器，那就改成数值就能了。

4、改为Mixin版，以方便快捷模块调用，为了便于区分，能前缀加上mixin，格式参照：

.mixin_basic_clock(变量名1: 模块; 变量名2: 模块){ 标识符部分1: 变量名1; 标识符部分2: 变量名2; }

第5步，JS更改为jQuery形式，因此改良

只不过这个改动不难，因此对位数计时器增加了年月日周。

原来的每个公共的判断方法提取出来，因为一般都是表明2位数，原来的小于2位，就自动在前面加个“0”，改良如下

function checkTime (i) { if (i < 10) { i = “0”+ i; }return i; } hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second);

最终标识符

clock.html

<!DOCTYPE html> <html lang=“zh-CN”> <head> <meta http-equiv=“X-UA-Compatible” content=“IE=Edge”> <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> <title>计时器</title> <link href=“../css/style.css” rel=“stylesheet” /> <script src=“http://code.jquery.com/jquery-2.1.4.min.js”></script> <script src=“../js/clock.js”></script> </head> <body> <div class=“circle_clock”> <!– 圆形雕件表盘 –> <div class=“frame_face”> <!– 刻度 –> <ul class=“minute_marks”></ul> <!– 刻度位数 –> <ul class=“digits”> <li>3</li> <li>5</li> <li>9</li> <li>12</li> </ul> <!– 指针 –> <div class=“hours_hand”></div> <div class=“minutes_hand”></div> <div class=“seconds_hand”></div> <!– 指针中心点 –> <div class=“clock_center”></div> </div> </div> <div class=“squire_clock”> <!– 长方形雕件表盘 –> <div class=“frame_face”> <!– 刻度 –> <ul class=“minute_marks”></ul> <!– 刻度位数 –> <ul class=“digits”> <li>3</li> <li>6</li> <li>9</li> <li>12</li> </ul> <!– 指针 –> <div class=“hours_hand”></div> <div class=“minutes_hand”></div> <div class=“seconds_hand”></div> <!– 指针中心点 –> <div class=“clock_center”></div> </div> </div> <br> <br> <!– 位数计时器 –> <div class=“digital_clock”> <div class=“digit_ymd num”></div> <div class=“digit_hms num”></div> </div> </body> </html>

mixin_clock.less

//现代雕件 //@clock_wh: 钟的宽度/高度 //@clock_border: 钟的边框，50%为圆形，也能设置成具体数值 //@frame_bgc1: 表盘背景渐变色1 //@frame_bgc2: 表盘背景渐变色2 //@mm_bgc: 刻度深蓝色 //@digits_c: 表盘位数文字色调 //@hh_bgc: 时针背景色调 //@mh_bgc：分针背景色调 //@sh_bgc：秒针背景色调 .mixin_basic_clock(@clock_wh: 30em; @clock_border: 50%; @frame_bgc1:#fff; @frame_bgc2:#ccc; @mm_bgc: #666; @digits_c: #555; @hh_bgc:#232425; @mh_bgc: #343536; @sh_bgc: #c00) { //@digits: 表盘文字中心距离 //@digits_s: 表盘文字大小不一 //@clock_center: 表盘中心大小不一 @digits: @clock_wh/4.2; @digits_s: @clock_wh / 20; @clock_center: @clock_wh / 8; // 表盘 .frame_face { position: relative; width: @clock_wh; height: @clock_wh; border-radius: @clock_border; background: linear-gradient(180deg, #f9f9f9, #666); box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8); &:before { content: ; width: @clock_wh * 0.98; height: @clock_wh * 0.98; border-radius: @clock_border; position: absolute; top: @clock_wh * 0.01; left: @clock_wh * 0.01; background: radial-gradient( ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100% ); } &:after { content: ; width: @clock_wh * 0.94; height: @clock_wh * 0.94; border-radius: @clock_border; position: absolute; top: @clock_wh * 0.03; left: @clock_wh * 0.03; box-shadow: inset rgba(0, 0, 0, 0.2) 0.2em 0.2em 1em; // border: (@clock_wh * 0.001) solid rgba(0, 0, 0, 0.2); background: linear-gradient(180deg, @frame_bgc1, @frame_bgc2); } } // 刻度 .minute_marks li{display: block; width: 0.2em; height: 0.6em; background: @mm_bgc; position: absolute; top: 50%; left: 50%; margin: –0.4em 0 0 –0.1em; z-index: 8; } // 刻度位数 .digits { width: @clock_wh; height: @clock_wh; border-radius: 50%;position: absolute; top: 50%; left: 50%; margin-top: –@clock_wh / 2; margin-left: –@clock_wh / 2; padding: 0; z-index: 9; li { font-size: @digits_s; display: block; width: @digits_s; height: @digits_s; position: absolute; top: 50%; left: 50%; line-height: @digits_s; text-align: center; margin: (-@digits_s / 2) 0 0 (-@digits_s / 2); font-weight: bold; color: darken(@digits_c, 10%); &:nth-child(1) { transform: translate(@digits, 0); } &:nth-child(2) { transform: translate(0, @digits); } &:nth-child(3) { transform: translate(-@digits, 0); }&:nth-child(4) { transform: translate(0, –@digits); } } } // 时针 .hours_hand { width: 0.8em; height: 7em; border-radius: 0 0 0.9em 0.9em; background: @hh_bgc; position: absolute; bottom: 50%; left: 50%; margin:0 0 –0.8em –0.4em; box-shadow: @hh_bgc 0 0 2px; transform-origin: 0.4em 6.2em; transform: rotate(-25deg); z-index: 21; &:before { content: ; background: inherit; width: 1.8em; height: 0.8em; border-radius: 0 0 0.8em 0.8em; box-shadow: @hh_bgc 0 0 1px; position: absolute; top: –0.7em; left: –0.5em; } &:after { content: ; width: 0; height: 0; border: 0.9em solid @hh_bgc; border-width: 0 0.9em 2.4em 0.9em; border-left-color: transparent; border-right-color: transparent; position: absolute; top: –3.1em; left: –0.5em; } } // 分针 .minutes_hand { width: 0.6em; height: 12.5em; border-radius: 0.5em; background: @mh_bgc; position: absolute; bottom: 50%; left: 50%; margin: 0 0 –1.5em –0.3em; box-shadow: @mh_bgc 0 0 2px; transform-origin: 0.3em 11em; z-index: 22; } // 秒针 .seconds_hand { width: 0.2em; height: 14em; border-radius: ~0.1em 0.1em 0 0 / 10em 10em 0 0; background: @sh_bgc;position: absolute; bottom: 50%; left: 50%; margin: 0 0 –2em –0.1em; box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em; transform-origin: 0.1em 12em; z-index: 23; &:before { content: ; width: 0.6em; height: 3em; border-radius: ~0.2em 0.2em 0.4em 0.4em / 0.2em 0.2em 2em 2em; box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em; background: inherit; position: absolute;left: 50%; bottom: –3em; margin-left: –0.3em; } &:after { content: ; width: 1em; height: 1em; border-radius: 50%; background: inherit; position: absolute; left: 50%; bottom: 1.5em; margin-left: –0.5em; } }//中心点 .clock_center { &:before { content: ; width: 1.6em; height: 1.6em; border-radius: 50%; position: absolute;top: 50%; left: 50%; margin: –0.8em 0 0 –0.8em; background: #121314; z-index: 10; } &:after { content: ;width: @clock_center; height: @clock_center; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: (-@clock_center / 2) 0 0 (-@clock_center / 2); border: 0.1em solid #c6c6c6; background: radial-gradient( ellipse at center, rgba(200, 200, 200, 0), rgba(190, 190, 190, 1) 90%, rgba(130, 130, 130, 1) 100% ); z-index: 11; } } } // 位数计时器 //@clock_w: 计时器宽度 //@clock_fs1: 文字大小不一1 //@clock_fs2: 文字大小不一2 //@clock_bgc1: 计时器深蓝色1 //@clock_bgc2: 计时器深蓝色2 //@clock_fc: 计时器文字色调 .mixin_digital_clock(@clock_w: 30em; @clock_fs1: 2em; @clock_fs2: 5em; @clock_bgc1:#0a2e38; @clock_bgc2:#000; @clock_fc: #daf6ff) { width: @clock_w; border-radius: 0.6em; padding: 1em; overflow: hidden; background: @clock_bgc1; background: radial-gradient(ellipse at center,@clock_bgc1 0%, @clock_bgc2 70%); .num { padding: 0.1em; color: @clock_fc; text-align: center; word-break: keep-all; letter-spacing: 0.05em; font-family: Share Tech Mono, Consolas, monaco, monospace; text-shadow: ~0 0 20px #0aafe6, 0 0 20px rgb(10 175 230 / 0%); } .digit_ymd { font-size: @clock_fs1; } .digit_hms { font-size: @clock_fs2; } }

style.less

//公共文档夹根产品目录 @resource_path: ../resource; // 组件扩展 @import @{resource_path}/mixin_clock; //圆形雕件 .circle_clock { .mixin_basic_clock(); display: inline-block; margin: 2em; } //长方形雕件 .squire_clock { .mixin_basic_clock(@clock_border: 2em; @frame_bgc1:#90bef3; @frame_bgc2:#616fad; @mm_bgc: #333;); display: inline-block; margin: 2em; } //位数计时器 .digital_clock { .mixin_digital_clock(); margin: 2em; }

clock.js