分分28官网|分分28开奖网

实验:JS+定时器实现在线时钟
作者:强官涛   类型:Web前端    类别:实验   日期:2017-12-08    阅读:2166 次   消耗积分:0 分


项目介绍


本项目主要利用JavaScript结合CSS定位和Transform属性实现一个HTML在线时钟,运行效果如图11-3所示。

20181029_151002_588.png

图11-3 HTML在线时钟

 

本项目实现的功能如下:

  • 根据当前系统的时间,精确到秒显示时间。

  • 模拟正常的钟表走时效果,每一秒种秒针走一小格。

  • 分针每一分种走一小格。

  • 时针不能直接从6点变到7点,不是每小时走一大格,而是模拟每分钟都转动一点点角度的真实效果。



开发思路


本项目的实现主要抓住几个关键点,这样事情将会变得非常简单。如果没有把握住关键技术点,则很难形成一套清晰的思路:

  • 表盘是一张固定的背景图片,我们可以直接在网上下载自己喜欢的图片即可。

  • 三个指针是三个DIV,通过设置类似指针的背景图或者利用DIV的背景色模拟即可。

  • 通过设置CSS中Transform变形属性值rotatep完成相应角度的旋转即可模拟走时效果。

  • 可以通过设置指针的旋转基点点为左边或下边来完成指针旋转,也可以设置为拉通的一条DIV,而只为其一半设置背景色或背景图来模拟指针旋转,这种情况下则不需要修改指针的旋转基点(即默认在DIV的正中心点旋转)。

上述的4条关键点只要我们想明白了,其实实现起来就不难了。首先来看看布局,其实核心元素就4个,一个表盘,三个指针,并且建议对三个指针使用绝对定位(position: absolute)进行。我们知道,绝对定位的一个前提是其父容器不能是默认值static,所以我们只需要简单的将时钟表盘这个父容器设置为position: relative,并不设置任何偏移量即可。

另外,关于指针的旋转角度的问题,一个表盘有60个刻度,每一个小时之间有5个小格子,一个圆圈是360度(deg),所以每一小格要旋转的角度是6 deg,每一个小时之间相关30 deg。那么我们再通过每秒钟的定时器来获取到当前秒钟数,进而让该数据乘以6,得到当前需要旋转的角度。再获取到当前的分钟数,进而完成让分针每一分钟转到6 deg的效果,同时让时针每一分钟转到0.5 deg。但是此处需要注意的是,我们的角度是假设从12点钟为0 deg来进行计算的,所以在布局时,三个指针都应该是12点钟方向的竖向布局。


代码实现



  1. 先完成表盘和指针的布局,代码如下:



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线时钟</title>
<style>
#face {
width: 600px;
height: 600px;
margin: 20px auto;
backgroundurl("../image/clockface.jpg"no-repeat;
positionrelative;
}
#second {
width: 4px;
height: 200px;
background-color#FC5753;
positionabsolute;
left: 298px;
top: 100px;
/* 设置指针的旋转基点为下方中间位置 */
            transform-originbottom center;
}
#minute {
width: 10px;
height: 175px;
background-color#0e2218;
positionabsolute;
left: 295px;
top: 125px;
transform-originbottom center;
}
#hour {
width: 15px;
height: 150px;
background-color#5948ff;
positionabsolute;
left: 292px;
top: 150px;
transform-originbottom center;
}
#center {
width: 30px;
height: 30px;
background-colorblack;
positionabsolute;
left: 285px;
top: 285px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="face">
<div id="hour"></div>   <!-- 时针 -->
    <div id="minute"></div<!-- 分针 -->
    <div id="second"></div<!-- 秒针 -->
    <div id="center"></div<!-- 中心的小圆点 -->
</div>
</body>
</html>

 

  1. 现在我们来实现定时器代码,完成指针的旋转走时:


<script>
setInterval(function() {
var time = new Date();
var second = time.getSeconds();
var minute = time.getMinutes();
var hour = time.getHours();
var hourDeg = hour%12*30 + minute*0.5;


document.getElementById("second").style.transform =

"rotate(" + second*6 + "deg)";
document.getElementById("minute").style.transform =

"rotate(" + minute*6 + "deg)";
document.getElementById("hour").style.transform =

"rotate(" + hourDeg + "deg)";
}, 1000);
</script>

 

上述代码的实现部分相对比较简单,所以此处不再赘述。只是期望读者通过对该项目的演练后,能够对表面上看似没有思路的问题多一些思考,对复杂问题多一些分解,并通过不断的代码积累,找到更加简洁高效的实现手段。








为了答谢大家对蜗牛学院的支持,蜗牛学院将会定期对大家免费发放干货,敬请关注蜗牛学院的官方微信。


20181009_153045_341.jpg


版权所有,转载本站文章请注明出处:蜗牛学院在线课堂, http://www.mountsinaibaptistchurch.org/note/4
上一篇: 实验:JS+定时器实现倒计时程序
下一篇: 原理:单例模式的陷阱
提示:登录后添加有效评论可享受积分哦!