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

2023-06-09 04:06:21 470人浏览八月长安

摘要

小编给大家分享一下css3+js如何实现简单的时钟特效，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！什么是CSScss是一种用来表现html或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一

小编给大家分享一下css3+js如何实现简单的时钟特效，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

什么是CSS

css是一种用来表现html或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

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

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

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

html代码如下：

代码如下:

css 代码如下：

代码如下:

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

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

更改后的css代码：

代码如下:

初始化 js代码：

代码如下:

window.onload = function () {
initClock();
}
var timer = null;
function $(id) {
return document.getElementById(id)
}
function CreateKeDu(pElement, className, deg, translateWidth) {
var Pointer = document.createElement("div");
Pointer.className = className
Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
pElement.appendChild(Pointer);
}
function initClock() {
var main = $("biaopan");
var timeLabel = $("timeLabel");
var hour = $("hour");
var minute = $("minute");
var second = $("second");
var now = new Date();
var nowHour = now.getHours();
var nowMinute = now.getMinutes();
var nowSecond = now.getSeconds();
//初始化timeLabel
timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
//初始化表盘
for (var index = 0; index < 4; index++) {
CreateKeDu(main, "hourPointer", index * 90, 138);
}
for (var index = 0; index < 12; index++) {
CreateKeDu(main, "minuterPointer",index*30, 140);
}
for (var index = 0; index < 60; index++) {
CreateKeDu(main, "secondPointer", index * 6, 142);
}
//初始化时分秒针
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)";
}

添加定时器：

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+js如何实现简单的时钟特效”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: CSS3+js如何实现简单的时钟特效

本文链接: https://www.lsjlt.com/news/255310.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

小编给大家分享一下CSS3+js如何实现简单的时钟特效，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一...

99+

2023-06-09
如何使用CSS3+js实现简单的时钟特效

小编给大家分享一下如何使用CSS3+js实现简单的时钟特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！html代码如下：<...

99+

2024-04-02
js实现简单圆盘时钟

本文实例为大家分享了js实现简单圆盘时钟的具体代码，供大家参考，具体内容如下预览图：代码： css： <style> .disc { ...

99+

2024-04-02
JS如何实现简单的下雪特效

这篇文章主要介绍了JS如何实现简单的下雪特效，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。前言首先看看项目结构，一张雪花图片，一个.html文件和 jquery-1.4.2....

99+

2023-06-22
JavaScript如何实现时钟特效

这篇“JavaScript如何实现时钟特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript如何实现时钟特效...

99+

2023-07-02
js+html+css实现简单电子时钟

本文实例为大家分享了js+html+css实现简单电子时钟的具体代码，供大家参考，具体内容如下最终结果： HTML部分 <!DOCTYPE html> <htm...

99+

2024-04-02
JavaScript实现简单钟表时钟

本文实例为大家分享了JavaScript实现简单钟表时钟的具体代码，供大家参考，具体内容如下效果图：主要思想： 1.先画一个圆表盘。 2.再用js循环画刻度（每一个刻度都是li...

99+

2024-04-02
css3如何实现简单的白云飘动背景特效

小编给大家分享一下css3如何实现简单的白云飘动背景特效，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！HTML结构该白云飘动特效的HTML结果非常简单，使用一个<div>来包裹一组作为白云的<div>...

99+

2023-06-08
JavaScript实现时钟特效

本文实例为大家分享了JavaScript实现时钟特效的具体代码，供大家参考，具体内容如下简单时间实现： <!DOCTYPE html> <html> <...

99+

2024-04-02
js如何实现电子时钟效果

本篇内容主要讲解“js如何实现电子时钟效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js如何实现电子时钟效果”吧!代码如下（示例）：<!DOCTYPE html><...

99+

2023-07-02
如何通过Canvas+JS实现简易的时钟

今天就跟大家聊聊有关如何通过Canvas+JS实现简易的时钟，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟...

99+

2023-06-17
基于HTML5+CSS3如何实现时钟效果

这篇文章给大家分享的是有关基于HTML5+CSS3如何实现时钟效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。目的：利用html5，css实现钟摆效果知识点： 1）利用pos...

99+

2024-04-02
CSS3如何实现时间轴特效

小编给大家分享一下CSS3如何实现时间轴特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这...

99+

2023-06-08
CSS3如何实现单选框动画特效

这篇文章主要讲解了“CSS3如何实现单选框动画特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3如何实现单选框动画特效”吧！HTML 代码<d...

99+

2024-04-02
js实现电子时钟效果

本文实例为大家分享了js实现电子时钟效果的具体代码，供大家参考，具体内容如下代码区域代码如下（示例）： <!DOCTYPE html> <html lang="...

99+

2024-04-02
vue2实现简易时钟效果

本文实例为大家分享了vue2实现简易时钟效果的具体代码，供大家参考，具体内容如下 1.vue2+纯css实现预览效果： 2.代码如下： <template> ...

99+

2024-04-02
javascript实现数字时钟特效

本文实例为大家分享了javascript实现数字时钟特效的具体代码，供大家参考，具体内容如下先看效果，动态数字时钟用到了jQuery，但是只是用来获取元素，只有一点点面向对象...

99+

2024-04-02
JS实现简单的下雪特效示例详解

目录前言主要实现代码HTML代码JS代码前言很多南方的小伙伴可能没怎么见过或者从来没见过下雪，今天我给大家带来一个小Demo，模拟了下雪场景，首先让我们看一下运行效果可以点击看看...

99+

2024-04-02
CSS3如何实现loading特效

这篇文章主要为大家展示了“CSS3如何实现loading特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS3如何实现loading特效”这篇文章吧。&nb...

99+

2024-04-02
js如何实现简单的选项卡效果

这篇文章主要介绍了js如何实现简单的选项卡效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果如下：代码如下：<!DOC...

99+

2024-04-02