五步轻松实现JavaScript HTML时钟效果


Posted in Javascript onMarch 25, 2020

学了一段时间的HTML、CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图:

五步轻松实现JavaScript HTML时钟效果

涉及到的知识点有: CSS3动画、DOM操作、定时器、圆点坐标的计算(好多人是不是已经还给自己的老师了~)
 接下来,我们用5步来制作它

step1、准备HTML

首先,我们需要准备HTML结构,背景、表盘、指针(时针、分针、秒针)、数字。

<div id="clock">
 <div class="bg">
 <div class="point">
 <div id="hour"></div>
 <div id="minute"></div>
 <div id="second"></div>
 <div class="circle"></div>
 </div>
 </div>
< /div>

step2、准备CSS

定义好指针的颜色和大小,需要说明的是transform: rotate(-90deg); 用来旋转指针,transform-origin:0 6px; 用来设置旋转中心点。

<style>
 *{
 margin: 0;
 padding: 0;
 }
 #clock{
 margin: 5% auto;
 width: 400px;
 height: 400px;
 border-radius: 10px;
 background: #aaa;
 position: relative;
 transform: rotate(-90deg);
 }
 #clock .bg{
 width: 360px;
 height: 360px;
 border-radius: 50%;
 background: #fff;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -180px;
 margin-top: -180px;
 }
 #clock .point{
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -14px;
 margin-top: -14px;
 }
 #clock #hour{
 width: 80px;
 height: 16px;
 background: #000;
 margin: 6px 0 0 14px;
 /*transform: rotate(30deg);*/
 transform-origin:0 8px;
 /*animation: hour 3s linear 100!* alternate*!;*/
 border-radius: 16px;
 }

 #clock #minute{
 width: 120px;
 height: 12px;
 background: #000;
 margin: -14px 0 0 14px;
 transform-origin:0 6px;
 border-radius: 12px;
 }
 #clock #second{
 width: 160px;
 height: 6px;
 background: #f00;
 margin: -9px 0 0 14px;
 transform-origin:0 3px;
 border-radius: 6px;
 }
 #clock .point .circle{
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: #000;
 position: absolute;
 left: 0;
 top: 0;
 }
 @keyframes hour {
 from {transform: rotate(0deg);}
 to {transform: rotate(360deg);}
 }

 #clock .number{
 position: absolute;
 font-size: 34px;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 transform: rotate(90deg);
 }
< /style>

step3、计算时针位置

JS通过Date对象获取当前时间,getHours获取小时、getMinutes获取分钟、getSeconds获取秒。时针转动一周是12格,每格角度就是360°/12,分钟和秒都是60格,每格角度360°/60。

function clock(){
 var date = new Date();//获取当前时间
 //时(0-23) 分(0-59)秒(0-59)
 //计算转动角度
 var hourDeg = date.getHours()*360/12;
 var minuteDeg = date.getMinutes()*360/60;
 var secondDeg = date.getSeconds()*360/60;
 //console.log(hourDeg, minuteDeg, secondDeg);
 //设置指针
 hour.style.transform = 'rotate('+hourDeg+'deg)';
 minute.style.transform = 'rotate('+minuteDeg+'deg)';
 second.style.transform = 'rotate('+secondDeg+'deg)';
}

step4、时钟转动

通过setInterval设置定时器,每秒刷新一次。注意,需要初始化执行一次,否则会在1s后才能看到效果。

//初始化执行一次
clock();
setInterval(clock,1000);

step5、绘制数字时间

数字时间也是在一个圆周上,我们只用确定好半径,然后得到半径上的坐标。通过左边来定位每个数字就好了。看一下圆坐标系的计算规则:

五步轻松实现JavaScript HTML时钟效果

* 圆半径坐标计算:
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
但是注意,我们计算的坐标是圆弧上点的坐标,当定位每个数字时,都是以元素的左上角点进行定位,这样我们的数字就会存在偏移。也就是说数字的中心点不在圆弧上,解决办法就是把坐标点(x,y)平移自身的一半(x-w/2, y-h/2)
,这样数字的中心点就在圆弧上了。

var pointX = 200;
var pointY = 200;
var r = 150;
function drawNumber(){
 var deg = Math.PI*2/12;//360°
 for (var i = 1; i <= 12; i++) {
 //计算每格的角度
 var angle = deg*i;
 //计算圆上的坐标
 var x = pointX + r*Math.cos(angle);
 var y = pointY + r*Math.sin(angle);
 //创建div,写入数字
 var number = document.createElement('div');
 number.className = 'number';
 number.innerHTML = i;
 //减去自身的一半, 让div的中心点在圆弧上
 number.style.left = x - 25 + 'px';
 number.style.top = y - 25 + 'px';
 //添加到页面
 myClock.appendChild(number);
 }
}

完整JS代码:

<script>
 /***
 * 时钟:
 * 1> 旋转: rotate(90deg)
 * 2> 旋转中心点: transform-origin
 * */
 //TODO step1: 获取时钟的指针
 var hour = document.getElementById('hour');//时针
 var minute = document.getElementById('minute');//分针
 var second = document.getElementById('second');//秒针
 var myClock = document.getElementById('clock');//时钟

 //TODO step2: 获取当前时间,把指针放在正确的位置
 function clock(){
 var date = new Date();//获取当前时间
 //时(0-23) 分(0-59)秒(0-59)
 //计算转动角度
 var hourDeg = date.getHours()*360/12;
 var minuteDeg = date.getMinutes()*360/60;
 var secondDeg = date.getSeconds()*360/60;
 //console.log(hourDeg, minuteDeg, secondDeg);
 //设置指针
 hour.style.transform = 'rotate('+hourDeg+'deg)';
 minute.style.transform = 'rotate('+minuteDeg+'deg)';
 second.style.transform = 'rotate('+secondDeg+'deg)';
 }
 //初始化执行一次
 clock();
 //TODO step3: 设置定时器
 setInterval(clock,1000);

 /***
 * 圆半径坐标计算:
 * x = pointX + r*cos(angle);
 * y = pointY + r*sin(angle);
 * */
 var pointX = 200;
 var pointY = 200;
 var r = 150;
 //TODO step4: 画时钟数字
 function drawNumber(){
 var deg = Math.PI*2/12;//360°
 for (var i = 1; i <= 12; i++) {
 //计算每格的角度
 var angle = deg*i;
 //计算圆上的坐标
 var x = pointX + r*Math.cos(angle);
 var y = pointY + r*Math.sin(angle);
 //创建div,写入数字
 var number = document.createElement('div');
 number.className = 'number';
 number.innerHTML = i;
 //减去自身的一半, 让div的中心点在圆弧上
 number.style.left = x - 25 + 'px';
 number.style.top = y - 25 + 'px';
 //添加到页面
 myClock.appendChild(number);
 }
 }
 drawNumber();
< /script>

怎么样,会了吗?

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
$.extend 的一个小问题
Jun 18 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
深入研究React中setState源码
Nov 17 #Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 #Javascript
jQuery实现滚动效果
Nov 17 #jQuery
不使用 JS 匿名函数理由
Nov 17 #Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 #Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 #Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 #Javascript
You might like
PHP爆绝对路径方法收集整理
2012/09/17 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
js 操作select相关方法函数
2009/12/06 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
python中的__slots__使用示例
2015/02/26 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
植树造林的宣传标语
2014/06/23 职场文书
新学期标语
2014/06/30 职场文书
2014年维修工作总结
2014/11/22 职场文书
订货会邀请函
2015/01/31 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL