制作⼆⼗四进制的时钟特效（JavaScript）
1. 任务要求
1）Date对象的使⽤；
2）ElementById("").innerHTML的使⽤；
3）setInterval()⽅法或setTimeout()⽅法的使⽤，注意两者的区别。
2. 实现思路
1）完成静态页⾯设计，标识要显⽰系统时间的位置，此例已完成该步骤。
2）定义函数，使⽤⽇期和时间对象，获取客户端系统时间。
3）为ID的time标签赋值。
4）使⽤定时函数，每隔⼀秒重新调⽤⼀次函数。
实现特效的代码js3. 需求说明
制作显⽰年、⽉、⽇、星期和⼆⼗四时制的时钟特效，如下图所⽰。
4. 实现代码（JS部分的代码）
1）使⽤getXXX⽅法获取时间和⽇期。
2）规定输出格式为“星期⼏”，由于getDay获取的为0~7的数组。所以需要定义⼀个数组week⽤来存储星期，⽤getDay⽅法获取星期，之后输出week[day]就可以实现输出。
3）获取时间后对⼩时、分钟、秒进⾏判断，如果⼩于10，在其前头加⼀个字符0以达到更好的时钟效果。
// JavaScript Document
function show(){
var myDate=new Date();
var FullYear(),
month=Month()+1),
Date(),
Day();
var week=["星期天","星期⼀","星期⼆","星期三","星期四","星期五","星期六"];
var Minutes();
var Seconds();
if (hour<10){
hour="0"+hour;
}
if (minute<10){
minute="0"+minute;
}
if (second<10){
second="0"+second;
}
setTimeout("show()",1000);
}
5. 运⾏结果
6. 其他代码（其中的图⽚需要⾃⼰设置）
除JS部分的代码如下（.html）
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" ></script>
<script src="js/time.js"></script>
</head>
<title>时钟特效</title>
<style>
body{
background-image: url(img/background5.jpg);//url图⽚需要⾃⼰设置⼀下    }
.content{
width: 300px;
margin: auto;
color: #4CAE4C;
}
#title{
font-size: 25px;
}
#myclock{
margin-top: 30px;
font-size: 60px;
font-weight: 900;
}
</style>
<body onload="show()">
<div class="content">
<div id="title"></div>
<div id="myclock"></div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。