用css3制作2种效果的在线时钟(LESS改进版)
xsobi 2024-12-31 15:26 1 浏览
前言
先贴上另一位开发者的原文地址，其实里面显示的是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
window.onload = function () {
// 生成刻度
var markWrap = $('.minute_marks');
for (index = 0; index < 60; index++) {
var markItem = $('<li></li>');
markItem.css("transform", "rotate(" + index * 6 + "deg) translateY(-12.7em)");
if (index % 5 == 0) {
markItem.css({ "width": "0.3em", "height": "1em" });
}
markWrap.append(markItem);
}
setInterval(function () {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
var week = "星期" + "日一二三四五六".split(/(?!\b)/)[today.getDay()];
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var hournum;
// 指针转动
if (hour > 12) {
hournum = ((hour - 12) + minute / 60) * 30;
} else {
hournum = (hour + minute / 60) * 30;
}
var minnum = (minute + second / 60) * 6 + second / 60;
var sennum = second * 6;
$('.hours_hand').css('transform', 'rotate(' + hournum + 'deg)');
$('.minutes_hand').css('transform', 'rotate(' + minnum + 'deg)');
$('.seconds_hand').css('transform', 'rotate(' + sennum + 'deg)');
// 数字时钟
function checkTime (i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
month = checkTime(month);
date = checkTime(date);
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);
$('.digit_ymd').text(year + '/' + month + '/' + date + ' ' + week);
$('.digit_hms').text(hour + ':' + minute + ':' + second);
}, 1000);
}时钟的样式还可以有更丰富的方法，比如给挂钟加个背景，8字形的数字时钟等等，可以在原有引用mixin之后再自己加样式覆盖，更多创意等待你的发现
相关推荐
- MySQL 正则表达式最全介绍
-
MySQL支持使用正则表达式进行模式匹配和文本搜索。正则表达式提供了一种强大的工具，可以用来匹配和检索字符串中的复杂模式。MySQL中的正则表达式功能主要在REGEXP或RLIKE运算符中使用。1....
- 正则前面的 (?i) (?s) (?m) (?is) (?im) 是什么意思
-
Q:经常看见的正则前面的(?i)(?s)(?m)(?is)(?im)是什么意思？...
- SQL中的正则表达式
-
正则表达式通常用来匹配字符，比如在一段字符中截取我们想要的字符，又或者将不想要的字符串替换，或者统计某个或者某几个字符出现的次数，我们都可以使用Oracle提供的正则表达式语法来完成。1.比如，我们在...
- 学习VBA，报表做到飞 第四章 正则表达式 4.10 贪婪模式与懒惰模式
-
第四章正则表达式4.10贪婪模式与懒惰模式正则表达式匹配时默认为贪婪模式，也就是尽可能多的匹配。有时候我们需要对符合条件的内容分开匹配，就要用到懒惰模式。...
- Python re模块 正则表达式之compile函数
-
一、应用场景为了重复利用同一个正则对象，需要多次使用这个正则表达式的话，使用re.compile()保存这个正则对象以便复用，可以让程序更加高效。二、使用方法...
- 几条常用的JavaScript正则表达式
-
在做项目或者代码编写过程中，一般会遇到验证电话、邮箱等格式是否正确合法的问题。通常我们会使用正则表达式，自己写很麻烦，且正则表达式又不是那么容易记住。所以现在分享几条常用的正则表达式，需要的时候直接复...
- C语言中使用正则表达式
-
POSIX规定了正则表达式的C语言库函数，参见regex（3),我们已经学了很多C函数的用法读者应该具备自己看懂man手册的能力C语言中使用正则表达式一般分为三步：1.编译正则表达式regco...
- VBA与Excel入门系列-12-正则表达式(上篇)
-
系统环境：Windows10...
- 系列专栏(八):JS的第七种基本类型Symbols
-
ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...
- EXCEL正则表达式的基础语法
-
正则表达式的基本概念及用途了解之后，我们就来学习下具体的语法，先以一个简单的例子来讲解。基础语法：比如，A1单元格中有一串字符：aabbccdd...
- 这几个冷门到你没听过的App，好用到为你打开新世界大门
-
一些好用的App总被埋没在数以百万计的应用商店中。今天为大家推荐几款Windows、Android、iOS、macOS平台里略显小众、但足够好用的遗珠App。万彩办公大师（Windows）转换Offi...
- C/C++知识分享:C语言正则表达式
-
C语言的正则表达式规则，特此跟大家分享。一、C语言如何使用正则表达式？C语言使用正则表达式的方法很简单，只需要包含正则表达式头文件即可：...
- Github工具库(二)
-
作者：Yunying...
- 在 JavaScript 中替换所有指定字符 3 种方法
-
在JS没有提供一种简便的方法来替换所有指定字符。在Java中有一个replaceAll()，replaceAll(Stringregex,Stringreplacement))方法...
- 正则表达式进阶
-
正则表达式，是每个程序员的必备的技能1.贪婪匹配和惰性匹配...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- firebug 使用 (31)
- characterencodingfilter (33)
- getmonth (34)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)
- android应用开发 (31)
- html转js (35)
- 索引的作用 (33)
- css3 0 (31)
- checkedlistbox (34)
- localhost 8080 (32)
- 多态 (32)
- net开发 (31)