【JS30-Wes Bos】实时显示的时钟网页 02
引言
本文利用javascript写一个实时显示时间的时钟特效网页。
网址为(https://janice143.github.io/realTImeClock/)
正文
1网页布局与功能
网页主体为一个时钟,具有表盘(12个数字)和三个指针(时针、分针、秒针)。
2实现原理
一、 html代码
使用一个类名为clock为的div容器,里面包含时针.hour-hand,分针.minute-hand,秒针second-hand,以及12个数字。
<div class="clock"><div class="hour-hand hand"></div><div class="minute-hand hand"></div><div class="second-hand hand"></div><div class="number"><span class="num12">12</span><span class="num1">1</span><span class="num2">2</span><span class="num3">3</span><span class="num4">4</span><span class="num5">5</span><span class="num6">6</span><span class="num7">7</span><span class="num8">8</span><span class="num9">9</span><span class="num10">10</span><span class="num11">11</span></div>
</div>
二、css代码
1 先让时钟显示在页面的中部(垂直居中,水平居中),这可以用个在clock的上一级词main中设置flex容器。
#main{display: flex;min-height: 100vh;align-items: center;justify-content: center;}
2 时钟的表盘的样式
.clock{width: 300px;height: 300px;border-radius: 300px;border: 20px solid white;position: relative;
}
3 指针的样式
指针旋转的特效是由transfrom:rotate(deg)实现的(本文这里是通过js代码后面再设置的)。transform-origin默认是50%,元素会绕着中间旋转,设置成100%后,元素绕着一端旋转。transition-timing-function是设置过渡的时间函数特效,不设置是默认均匀地过渡。
.hand{width: 120px;height: 6px;background-color: blueviolet;position:absolute;top:148px;right: 148px;transform-origin: 100%;transition:all 0.05s;transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand{width: 100px;
}
.second-hand{height: 4px;
}
4 12个数字的样式
先给数字设置相对定位,相对于上一级.number。然后再给每个数字设置相应的top和left. 数字位置算法为:
num=2; top=135sin((num-3)30/180pi)+135; left=135cos((num-3)30/180pi)+135 (num为1-12的数字)
.number{width: 300px;height:300px;font-size: 15px;position:absolute;top:0px;right: 0px;
}
三、 javascript代码
分别获取时针、分钟、秒针的类名,然后通过当前时间给三个指针分配正确的旋转角度。
1 秒针: parseInt(second/60*360)+90;
2 分针: parseInt(minute/(60)*360+second/10)+90;
3 时针:parseInt(hour/(12)*360+minute/(60)*30)+90;
+90度是因为设置指针css样式的时候,指针都在指在9点钟的位置,+90度可让指针从12点为起始点旋转。
设置为指针的角度后,利用定时器每隔一秒刷新指针的位置,这样就可以达到实时显示的效果。
当指针转弯一圈后,重新运行设置时间函数 setDate()重置指针的角度。
// 获取指针的transform样式,从而让其旋转const secondHand = document.querySelector('.second-hand');const minuteHand = document.querySelector('.minute-hand');const hourHand = document.querySelector('.hour-hand');const audio = document.querySelector('audio');// 获取当前时间,从时间里设置指针function setDate(){const time = new Date();const second = time.getSeconds();const secondDeg = parseInt(second/60*360)+90;secondHand.style.transform = `rotate(${secondDeg}deg)`;const minute= time.getMinutes();const minuteDeg = parseInt(minute/(60)*360+second/10)+90;minuteHand.style.transform = `rotate(${minuteDeg}deg)`;const hour= time.getHours();const hourDeg = parseInt(hour/(12)*360+minute/(60)*30)+90;hourHand.style.transform = `rotate(${hourDeg}deg)`;}// 设置定时器美隔一秒时间进行刷新页面setInterval(setDate,1000);// setDate(); // 当指针转一圈后,重置度数
总结
完整代码放在了Github上,如果读者有兴趣,不妨试一试。
【JS30-Wes Bos】实时显示的时钟网页 02相关推荐
- 一个实时显示系统时钟的android应用
这是一个实时显示时钟的应用. 主要点:①如何用方法将数字的每一位拆开:②思考哪些部分是需要循环执行的:③使用了计时器Timer类和Handler类. 实时时钟主要是思路是.获取系统的时间,然后将这个时 ...
- 在网页中显示数字时钟
<html> <head> <title>实时走动的数字时钟</title> </head> <script> function ...
- 通过webSocket实现app产生的数据在网页实时显示
一概述 ## 在项目中有这样一个需要,app为智能心电跑步类app,在跑步时需要在网页端显示用户的跑步信息,包括跑步时长.心率.心电图等,其中心电图是需要实时更新的.当用户开始跑步时在网页上显示这些信 ...
- 通过webSocket实现app运动数据在网页实时显示
一概述 ## 在项目中有这样一个需要,app为智能心电跑步类app,在跑步时需要在网页端显示用户的跑步信息,包括跑步时长.心率.心电图等,其中心电图是需要实时更新的.当用户开始跑步时在网页上显示这些信 ...
- javascript实现 时钟实时显示及幻灯片自动播放
动态时钟的实现--实时显示时间 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type ...
- 使用定时器编程,在实时显示当前时间,每隔2秒时钟内容更新一次
编写一个java application应用程序,使用定时器编程,在实时显示当前时间,每隔2秒时钟内容更新一次. 定时器Timer类 程序代码: 运行结果: 定时器Timer类 Timer是一种定时器 ...
- python web 服务器实时监控 websocket_python websocket网页实时显示远程服务器日志信息...
功能:用websocket技术,在运维工具的浏览器上实时显示远程服务器上的日志信息 一般我们在运维工具部署环境的时候,需要实时展现部署过程中的信息,或者在浏览器中实时显示程序日志给开发人员看.你还在用 ...
- html在状态栏中显示时间,html网页时间显示代码和倒计时代码大全
Date(); var day; var date; if(today.getDay()==0) day = "星期日" if(today.getDay()==1) day = & ...
- 项目实例改编:利用structs2的action 实时显示图片、pdf和其他内容的框架抽取。(转)...
转自:http://www.verydemo.com/demo_c167_i1382.html 针对:预览文件(图片,PDF)文件来源为action中的inputStream 重点: structs2 ...
最新文章
- 搭建Windows Server 2008故障转移群集
- element.onclick = fun与element onclick=fun()的区别
- java string类api_JAVA中String类的常用方法API
- SAP SD定价技术分析
- 【原】macbook不睡眠的排查与解决
- matplotlib 旋转刻度_Matplotlib数据可视化:文本与坐标轴
- ASP.NET中的FILE对象总结
- 华为成了!鸿蒙OS 2.0对比iOS 14:苹果流畅度竟完败?
- mysql 创建时间 只能设置一个_在MySQL中创建数据表时,可以设定主键、外键。那么对于一个数据表,能设置的主键和外键个数最多分别是...
- 用MaskNetwork代币MASK首轮公开销售已结束,今晚23:00将进行第二轮售卖
- 【跃迁之路】【712天】程序员高效学习方法论探索系列(实验阶段469-2019.2.2)...
- NLP学习------HanLP使用实验
- 【项目介绍】单发动机驱动的多旋翼飞行器及其控制系统
- 自动尺寸标注 html,PxCook - 高效易用的自动标注工具,生成前端代码,设计研发协作利器...
- 普渡大学计算机科学师生比,公立常春藤高校普渡大学,附申请要求+录取难度!...
- smartbi连接mysql数据库_数据源连接 - Smartbi V7 帮助中心 - Smartbi 在线知识中心
- 少儿编程有多火,家长就有多焦虑...
- 数据库SQL实战-查找所有员工自入职以来的薪水涨幅情况(mysql)
- 南京师范大学计算机学院师资,南京师范大学计算机与电子信息学院导师教师师资介绍简介-赵华...
- 【Python代码】文件查重(01)-简易版