html罗盘时钟代码_web前端⼊门到实战：纯js时钟特效
电⼦时钟是⽹上常见的功能，在学习date对象和定时器功能时，来完成⼀个电⼦时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。
先准备⼀个html元素，⽤来放置时钟。新建⼀个div元素，它的id命名为clock，如下所⽰：
<div id="clock" class="clock_con"></div><!--基础时钟元素-->
本实例电⼦时钟的格式设定为 (yyyy-MM-dd hh:mm:ss) ，⽤js来组合⼀个简单的时钟字符串放到clock元素中。
html滚动效果代码本实例把时钟功能封装到函数中，所以先创建⼀个creatClock函数，在creatClock中再来编写具体代码。
建议在完成某⼀个前端功能时，应先分析功能的具体操作。再根据具体操作把实现功能的⽅法分成多个步骤，接下来⼀个步骤⼀个步骤去完成它。来看⼀下⽤js组合这样⼀串字符，需要哪些步骤：
1 调⽤date对象，获取计算机的本地时间
1.1 调⽤date对象
1.2 获取当前年份
1.3 获取当前⽉份，⽉份是从0开始计数，所以需要加1才是正确的⽉份 1.4 获取当前⽇期
1.5 获取当前⼩时
1.6 获取分钟
1.7 获取秒数
2. 格式化获取到的时间数据
2.1 单数字前添加字符串0，⽤以符合时钟格式
2.2 组合时间数据为字符串
3. 在clock元素中实时显⽰时间
3.1 获取clock元素
3.2 修改clock元素中的时间
3.3 使⽤定时器实时更新时间
具体代码如下：
function fnCreatClock(){
//声明时间相关变量
var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
//1 获取计算机本地时间
function fnGetDate(){
//1.1 调⽤date对象
dLocal = new Date();
//1.2 获取当前年份
nYear = FullYear();
//1.3 获取当前⽉份，⽉份是从0开始计数，所以需要加1才是正确的⽉份
nMonth = Month() + 1;
//1.4 获取当前⽇期
nDate = Date();
//1.5 获取当前⼩时
nHours = Hours();
//1.6 获取分钟
nMinutes = Minutes();
//1.7 获取秒数
nSeconds = Seconds();
}
//2.1 封装⼀个函数，⽤于把单数字前添加字符串0，例如1改为01
function fnToDouble(num){
//声明⼀个返回结果
var sResult = '';
if(num<10){
//判断数字⼩于10则是单数字，需要在前⾯添加字符串0
sResult = '0' + num;
}else{
//数字为10以上转换为字符串
sResult = '' + num;
}
//返回格式化后的字符串
return sResult;
}
function fnFormatDate(){
//2.2 组合时间数据为字符串。本实例主要针对初学者，所以这⾥⽤的是最简单的格式化⽅式，即把所有数据⽤+号相连 return nYear + '-' + fnToDouble(nMonth) + '-' + fnToDouble(nDate) +
' ' + fnToDouble(nHours) + ':' + fnToDouble(nMinutes) + ':' + fnToDouble(nSeconds);
}
//3.1 获取clock元素
var eClock = ElementById('clock');
//获取时间
fnGetDate();
//3.2 修改clock元素中的时间
eClock.innerHTML = fnFormatDate();
//使⽤定时器实时更新时间
setInterval(function(){
//3.3 每秒更新时间
fnGetDate();
//3.3 修改clock元素中的时间
eClock.innerHTML = fnFormatDate();
},1000);
}
fnCreatClock();
此时的效果如图所⽰：
现在做出来的时钟看起来感觉有点简陋，也可以尝试把数字换成图⽚，这样所呈现效果就会好很多。这⾥暂时忽略⽇期部分，只为时间部分添加图⽚效果，还是先看⼀下需要哪些html元素，代码如下：
<div id="imgClock" class="clock_container"><!--图⽚时钟元素-->
<div id="imgHours" class="img_box">
<span class="img_0"></span>
<span class="img_0"></span>
</div>
<div class="img_point"></div>
<div id="imgMinutes" class="img_box">
<span class="img_0"></span>
<span class="img_0"></span>
</div>
<div class="img_point"></div>
<div id="imgSeconds" class="img_box">
<span class="img_0"></span>
<span class="img_0"></span>
</div>
</div>
还需要准备0-9共10张图⽚，可以⾃⼰制作类似效果的数字图⽚。css代码可以⾃⼰根据需要编写，也可以复制以下代码使⽤：
.clock_container{
margin-top:60px;
font-size:0;
text-align:center;
}
.clock_container div{
display:inline-block;
}
.clock_container .img_box span{
display:inline-block;
width:80px;
height:100px;
margin:0 2px;
border-radius:8px;
background-color:#77a6b6;
}
.clock_container .img_0{
background:url(img/img_0.png) no-repeat;
}
.clock_container .img_1{
background:url(img/img_1.png) no-repeat;
}
.clock_container .img_2{
background:url(img/img_2.png) no-repeat;
}
.
clock_container .img_3{
background:url(img/img_3.png) no-repeat;
}
.clock_container .img_4{
background:url(img/img_4.png) no-repeat;
}
.clock_container .img_5{
background:url(img/img_5.png) no-repeat;
}
.clock_container .img_6{
background:url(img/img_6.png) no-repeat;
}
.clock_container .img_7{
background:url(img/img_7.png) no-repeat;
}
.clock_container .img_8{
background:url(img/img_8.png) no-repeat;
}
.clock_container .img_9{
background:url(img/img_9.png) no-repeat;
}
.clock_container .img_point{
width:60px;
height:100px;
background:url(img/img_point.png) no-repeat center;
}
按照惯例，完成功能前先整理步骤。这⾥再多添加⼀个步骤，在imgClock元素中来完成图⽚美化后的时钟效果，步骤如下：
4. 在imgClock元素中，⽤图⽚作为背景实时修改时间
4.1 分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素
4.2 根据时间修改时、分、秒元素的class，⽤来改变背景样式
4.3 使⽤定时器更新元素背景
修改后的代码如下：
function fnCreatClock(){
//声明时间相关变量
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论