CSS3+js实现简单的时钟特效

前端技术 2023/09/09 CSS

学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：

准备前期工作，把时钟的表盘，时分秒针，实时时间标签的大概样子做好，效果如图：

html代码如下：

复制代码

代码如下:

css 代码如下：

复制代码

代码如下:

　　2. 初始化默认时间，和表盘刻度，效果如下：

更改后的css代码：

复制代码

代码如下:

初始化 js代码：

复制代码

代码如下:

3.添加定时器：

js代码如下：

复制代码

代码如下:

//定时器
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
var now = new Date();
var nowSecond = now.getSeconds();
var nowMinute = now.getMinutes();
var nowHour = now.getHours();
second.style.transform = \"rotate(\" + (nowSecond * 6 - 90) + \"deg)\";
minute.style.transform = \"rotate(\" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + \"deg)\";
hour.style.transform = \"rotate(\" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + \"deg)\";
timeLabel.innerHTML = nowHour + \":\" + nowMinute + \":\" + nowSecond;
}, 1000);
}

　　4.使用OOP方式更改：

修改后的js代码如下：

复制代码

代码如下:

最后调用如下：

复制代码

代码如下:

window.onload = function () {
new Clock();
}

最终页面代码：

复制代码

代码如下:

<!DOCTYPE html>
<html xmlns=\"<a href=\"http://www.w3.org/1999/xhtml\">http://www.w3.org/1999/xhtml</a>\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 300px;
border: 1px solid #000;
box-shadow: 2px 5px #808080;
}
#timeLabel {
position: absolute;
background-color: pink;
width: 80px;
height: 25px;
left: 110px;
top: 180px;
color: #fff;
line-height: 25px;
text-align: center;
}
#hour {
width: 100px;
height: 10px;
background-color: red;
position: absolute;
left: 150px;
top: 145px;
transform-origin: 0 50%;
}
#minute {
width: 120px;
height: 8px;
background-color: blue;
position: absolute;
left: 150px;
top: 146px;
transform-origin: 0 50%;
}
#second {
width: 140px;
height: 4px;
background-color: green;
position: absolute;
left: 150px;
top: 148px;
transform-origin: 0 50%;
}
.hourPointer, .minuterPointer, .secondPointer {
position: absolute;
transform-origin: 0 50%;
}
.hourPointer {
height: 10px;
width: 12px;
left: 150px;
top: 145px;
background-color: #f00;
z-index: 3;
}
.minuterPointer {
height: 8px;
width: 10px;
left: 150px;
top: 146px;
background-color: #b6ff00;
z-index: 2;
}
.secondPointer {
height: 6px;
width: 8px;
left: 150px;
top: 147px;
background-color: #fa8;
z-index: 1;
}
</style>
<script>
function Clock() {
//定义属性
this.main = this.$(\"biaopan\");
this.timeLabel = this.$(\"timeLabel\");
this.hour = this.$(\"hour\");
this.minute = this.$(\"minute\");
this.second = this.$(\"second\");
this.nowHour = null;
this.nowMinute = null;
this.nowSecond = null;
this.timer = null;
var _this = this;
//初始化函数
var init = function () {
_this.getNowTime();
_this.initClock();
_this.InterVal();
}
init();
}
Clock.prototype.$ = function (id) {
return document.getElementById(id)
}
Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
var Pointer = document.createElement(\"div\");
Pointer.className = className
Pointer.style.transform = \"rotate(\" + deg + \"deg) translate(\" + translateWidth + \"px)\";
this.main.appendChild(Pointer);
}
Clock.prototype.getNowTime = function () {
var now = new Date();
this.nowHour = now.getHours();
this.nowMinute = now.getMinutes();
this.nowSecond = now.getSeconds();
}
Clock.prototype.setPosition = function () {
this.second.style.transform = \"rotate(\" + (this.nowSecond * 6 - 90) + \"deg)\";
this.minute.style.transform = \"rotate(\" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + \"deg)\";
this.hour.style.transform = \"rotate(\" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + \"deg)\";
}
Clock.prototype.initClock = function () {
//初始化timeLabel
this.timeLabel.innerHTML = this.nowHour + \":\" + this.nowMinute + \":\" + this.nowSecond;
//初始化表盘
for (var index = 0; index < 4; index++) {
this.CreateKeDu(\"hourPointer\", index * 90, 138);
}
for (var index = 0; index < 12; index++) {
this.CreateKeDu(\"minuterPointer\", index * 30, 140);
}
for (var index = 0; index < 60; index++) {
this.CreateKeDu(\"secondPointer\", index * 6, 142);
}
this.setPosition();
}
Clock.prototype.InterVal = function () {
clearInterval(this.timer);
var _this = this;
this.timer = setInterval(function () {
_this.getNowTime();
_this.second.style.transform = \"rotate(\" + (_this.nowSecond * 6 - 90) + \"deg)\";
_this.minute.style.transform = \"rotate(\" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + \"deg)\";
_this.hour.style.transform = \"rotate(\" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + \"deg)\";
_this.timeLabel.innerHTML = _this.nowHour + \":\" + _this.nowMinute + \":\" + _this.nowSecond;
}, 1000);
}
window.onload = function () {
new Clock();
}
</script>
</head>
<body>
<div class=\"main\" id=\"biaopan\">
<div id=\"timeLabel\"></div>
<div id=\"hour\"></div>
<div id=\"minute\"></div>
<div id=\"second\"></div>
</div>
</body>
</html>

总结：本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果。

以上所述就是本文的全部内容了，希望本文能够对大家学习CSS3有所帮助。

本文地址：https://www.stayed.cn/item/25389

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)