利用HTML5+CSS3+JS实现简单的钟表

HTML5+CSS3+JS实现动态时钟

利用HTML5+CSS3+JS实现简单的钟表，仅供参考学习

效果图：

在线效果预览

思路：

1. 先定义一个类名为timepiece的圆表表盘

HTML:

<div class="timepiece"></div>

CSS:

.timepiece {position: relative;width: 401px;height: 401px;border: 1px solid #333;border-radius: 50%;margin: 0 auto;}

2. 定义一类名为constantly的ul标签来放li用来做钟表的时刻

HTML:

<div class="timepiece"><!-- 钟表的刻度 --><ul class="constantly"></ul>
</div>

3. 利用JS来生成时间刻度并添加相应的样式类名

CSS:

/* 所有时刻的样式类名 */
.constantly .li {position: absolute;left: 50%;top: 0;transform: translate(-50%);width: 1px;height: 9px;background-color: #333;transform-origin: center 200px;}
/* 每个小时的时刻样式 */
.constantly .lip {width: 3px;height: 12px;}

JS:

//获取到ul标签
let ul = document.querySelector('.constantly')
// 遍历实现时钟刻度
for (let i = 0; i < 60; i++) {//创建li标签let li = document.createElement('li')//给所有里标签添加旋转属性li.style.transform = `translate(-50%) rotate(${i * 6}deg)`//把li标签添加到ul里面ul.appendChild(li)//给所有ul标签里的li标签添加一个里的类名ul.children[i].classList.add('li')}
//为每个时刻添加样式
for (let j = 0; j < 12; j++) {ul.children[j * 5].classList.add('lip')}

4. 定义一个类名为interval的盒子存放显示小时和分钟

HTML:

<div class="timepiece"><!-- 钟表的中间 --><div class="interval"></div>
</div>

CSS:

/*定位在盒子中间和添加相应的样式*/
.interval {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background-color: #ccc;border-radius: 50%;text-align: center;line-height: 100px;}

JS:

//获取到interval元素
let interval = document.querySelector('.interval')
//封装一个获取当前时间的函数，并以对象的方式返回
function getTimes() {// 初始化时间let date = new Date()let hours = date.getHours()let minute = date.getMinutes()let second = date.getSeconds()// 返回一个时间对象return { hours: hours, minute: minute, second: second }}
//设置定时器让时钟动态显示
setInterval(() => {//添加时分到interval里面显示，并格式化时间let h = getTimes().hours < 10 ? '0' + getTimes().hours : getTimes().hourslet m = getTimes().minute < 10 ? '0' + getTimes().minute : getTimes().minuteinterval.innerText = `${h}:${m}`
},1000)

5. 设置秒钟的时真，这里我们把每一个刻刻度的当成秒钟时针秒钟到那那里变秒钟指针

CSS:

.constantly .lis {width: 8px;height: 14px;background-color: aqua;}

JS:

//设置定时器让时钟动态显示
setInterval(() => {  //定义一个变量存放秒钟let i = getTimes().second//在添加秒钟样式的时候把上一个的刻度的秒钟样式移除// ul.children[i - 1 === -1 ? 59 : i - 1].classList.remove('lis')// 把所有li标签的秒钟样式清除一遍for (let i = 0; i < 60; i++) {ul.children[i].classList.remove('lis')}//添加秒钟样式ul.children[i].classList.add('lis')
},1000)

6. 设置一个类名为minute的盒子作为分钟时针

HTML:

<div class="timepiece"><!-- 绘制一个分钟的指针 --><div class="minute"></div>
</div>

CSS:

.minute {position: absolute;left: 50%;top: 79px;transform: translate(-50%);width: 5px;height: 67px;background-color: #333;border-radius: 2px;transform-origin: center 121px;}

JS:

//获取分钟元素
let minute = document.querySelector('.minute')
//设置定时器让时钟动态显示
setInterval(() => {//让分钟实时动起来minute.style.transform = `translate(-50%) rotate(${getTimes().minute * 6}deg)`
},1000)

7. 设置类名为hours的时钟指针

HTML:

<div class="timepiece"><!-- 绘制一个时钟的指针 --><div class="hours"></div>
</div>

CSS:

.hours {position: absolute;left: 50%;top: 122px;transform: translate(-50%);width: 16px;height: 24px;background-color: aquamarine;border-radius: 2px;transform-origin: center 78px;}

JS:

//获取时钟指针元素
let hours = document.querySelector('.hours')
setInterval(() => {//让时格式化为12小时let h = getTimes().hours > 12 ? getTimes().hours - 12 : getTimes().hours// 把一个小时划分为五份，每一份占六度let h1 = getTimes().minute / 12 * 6//时钟实时的旋转度数hours.style.transform = `translate(-50%) rotate(${h * 30 + h1}deg)`
},1000)

8. 在线代码地址：

JS时钟在线代码

利用HTML5+CSS3+JS实现简单的钟表相关推荐

css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐...
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）
生日快乐网站模板HTML(精品制作)(HTML5+CSS3+JS) 最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网 ...
Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
Web点餐系统(前端开发) 一.系统简介二.系统设计三.系统实现 · 首页(当天菜品)/推荐菜品/热买菜品 · 已选菜品 · 我的订单 · 订单统计四.总结五.源码下载一.系统简介该Web ...
HTML5 + css3 + js 网页设计作业网页小游戏
用HTML5 + css3 + js 做的一个翻图片的网页小游戏,挺有意思的吧! 因为上网页课要交一个个人的网页设计作业,时间挺紧的,记得以前玩游戏偶尔看到一个翻转图片的小游戏,就想模仿着做一个! 目 ...
HTML5,CSS3,js
HTML5,CSS3,js html5 html基本结构块级标签和行级标签 html5表格 html5表单 css3 css使用方法 css常用属性 css3的过渡和变换 css3的动画属性和多列属 ...
七夕静态页面html,html5+CSS3+JS实现七夕言情功能代码
因为今天8月28日就是中国的情人节-七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心:制作了h5+css+js界面祝小伙伴们:七夕快乐具体的功能有: 1.下雪的背景动画 2.下面的 ...

利用HTML5+CSS3+JS实现简单的钟表

HTML5+CSS3+JS实现动态时钟

利用HTML5+CSS3+JS实现简单的钟表相关推荐

最新文章

热门文章