1.界面设计
1.1整体设计
首先直接使用区域元素创建电子时钟区域,并在页面上添加标题,水平线;
相关HTML5代码片段如下:
下面展示一些 内联代码片
。
<body>
<!--标题-->
<h3>简单电子时钟的设计与实现</h3>
<!--水平线-->
<hr />
<!--电子时钟区域-->
<div id="clock"></div>
</body>
该段代码为div元素定义了id=“clock”,以便可以使用CSS的ID选择器进行样式设置。
本例使用 CSS 外部样式表规定页面样式。在本地css文件夹中创建clock.css文件,并在head首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下:
下面展示一些 内联代码片
。
<head>
<meta charset="utf-8">
<title>简单电子时钟的设计与实现</title>
<link rel="stylesheet" href="css/clock.css">
</head>
在CSS文件中为div标签设置样式,具体样式要求如下。
·尺寸:宽度为800像素;
·字体:字体颜色为白色,字体大小为80像素,加粗显示;
·文本:居中显示,字体采用了默认格式;
·边距:各边的外边距为20像素。
相关CSS代码片段如下:
下面展示一些 内联代码片
。
/*电子时钟的总体样式设置*/
#clock {
width:800px;
font-size: 80px;
font-weight:
bold; color: red;
text-align: center;
margin: 20px;
}
目前尚未在div首尾标签之间填充电子时钟的具体内容,因此在网页上浏览没有完整的效果,需等待后续补充。
1.2时分秒显示框的设计
在id="clock"的div元素内部添加3个div子元素用于显示时分秒的具体数字,并为其分别设置自定义id名称为 h、m、s(取 hour、minute 和 second 的首字母)。
相关HTML5代码片段修改后如下:
下面展示一些 内联代码片
。
<body>
<!--标题-->
<h3>简单电子时钟的设计与实现</h3>
<!--水平线-->
<hr />
<!--电子时钟区域-->
<div id="clock">
<div class="box1" id="h"></div>
<div class="box1" id="m"></div>
<div class="box1" id="s"></div>
</div></body>
该段代码为3个显示框定义了相同的类名称box1,以便在CSS样式表中可以使用类选择器为其设置统一样式。
在CSS文件中为class="box1"的div标签设置统一样式,具体样式要求如下。
·边距:右侧外边距为10像素;
·尺寸:宽和高均为100像素;
·文本:行高为100像素;
·浮动:向左浮动:
·边框:各边为1像素宽的灰色实线边框。
相关CSS代码片段如下:
下面展示一些 内联代码片
。
/*时分秒数字区域的样式设置*/
.box1 {
margin-right: 10px;
width: 100px;
height: 100px;
line-height: 100px;
float: left;
border: gray lpx solid;
}
在3个显示框之间使用div元素插入两个分割区域,用于显示时分秒数字之间的冒号。相关HTML5代码片段修改后如下:
下面展示一些 内联代码片
。
<body>
<!--标题-->
<h3>简单电子时钟的设计与实现</h3>
<!--水平线-->
<hr />
<!--电子时钟区域-->
<div id="clock">
<div class="boxl" id="h"></div>
<div class="box2">:</div>
<div class="box1" id="m"></div>
<div class="box2">:</div>
<div class="boxl" id="s"></div>
</div>
</body>
该段代码为两个冒号区域定义了相同的类名称box2,以便在CSS样式表中可以使用类选择器为其设置统一样式。
在CSS文件中为class="box2"的div标签设置统一样式,具体样式要求如下。
·尺寸:宽度为30像素;
·浮动:向左浮动;
·边距:右侧外边距为10像素。
相关CSS代码片段如下:
下面展示一些 内联代码片
。
/*冒号区域的样式设置*/
.box2{
width: 30px;
float: left;
margin-right: 10px;
}
2.时钟动态效果的实现
首先在body首尾标签内部添加script区域,并使用document.getElementById()方法获取用于显示时分秒的3个显示框对象。
相关HTML5代码如下:
下面展示一些 内联代码片
。
<script>
//获取显示小时的区域框对象
var hour = document.getElementById("h");//获取显示分钟的区域框对象
var minute = document.getElementById("m");//获取显示秒的区域框对象
var second = document.getElementById("s");
</script>
在JavaScript中创建自定义函数方法getCurrentTime(),用于获取当前时间并显示在页面中。
相关JavaScript代码如下:
<script>
..
//获取当前时间
function getCurrentTime(){
var date = new Date();
var h = date.getHours () ;
var m = date.getMinutes() ;
var s = date.getSeconds () ;
if (h < 10)
h= "0"+h; //以确保0~9时也显示成两位数
if (m<10)
m = "0" + m;//以确保0~9分钟也显示成两位数
if (s < 10)
s = "0" + s;//以确保0~9秒也显示成两位数
hour.innerHTML=h;
minute.innerHTML=m;
second.innerHTML=s;
</script>
在该段代码中首先使用了JavaScript中的Date对象获取当前时间的时分秒具体数值,为确保每次均显示成两位数的效果,分别判断当前时分秒是否小于10,如果比10小则在前面加一个数字0,然后将修改后的数值使用innerHTML属性显示到对应的时间显示框中。
将getCurrentTime()函数添加到标签的onload事件中,以确保每次打开页面就立刻显示当前时间。相关HTML5代码修改后如下:
下面展示一些 内联代码片
。
<body onload="getCurrentTime()">
.....
</body>
最后在JavaScript代码部分添加setInterval()方法,设置成每秒钟重新调用一次获取当前时间并显示在页面上的getCurrentTime()函数。相关JavaScript代码如下:
下面展示一些 。
//每秒更新一次时间
setInterval("getCurrentTime()",1000);
其中,第1个参数表示的是需要调用的函数名称;第2个参数表示的是间隔时间,其单位为毫秒,1000毫秒=1秒。
3.完整代码展示
完整的HTML代码如下:
下面展示一些 内联代码片
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简单电子时钟的设计与实现</title>
<link rel="stylesheet" href="css/demo.css" />
</head>
<body onload="getCurrentTime()">
<!-- 标题 -->
<h3>简单电子时钟的设计与实现</h3>
<!-- 水平线 -->
<hr />
<!-- 电子时钟区域 -->
<div id="clock">
<div class="box1" id="h"></div>
<div class="box2">:</div>
<div class="box1" id="m"></div>
<div class="box2">:</div>
<div class="box1" id="s"></div>
</div>
<script>
// 获取显示小时的区域框对象
var hour = document.getElementById("h");
// 获取显示分钟的区域框对象
var minute = document.getElementById("m");
// 获取显示秒的区域框对象
var second = document.getElementById("s");
// 获取当前时间
function getCurrentTime() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
if (h < 10) h = "0" + h;
// 以确保0~9时也显示成两位数
if (m < 10) m = "0" + m;
// 以确保0~9分钟也显示成两位数
if (s < 10) s = "0" + s;
// 以确保0~9秒也显示成两位数
hour.innerHTML = h;
minute.innerHTML = m;
second.innerHTML = s;
}
// 每秒更新一次时间
setInterval("getCurrentTime()", 1000);
</script>
</body>
</html>
完整的CSS代码如下:
/* 电子时钟的总体样式设置 */
#clock {
width: 800px;
font-size: 80px;
font-weight: blod;
color: red;
text-align: center;
margin: 20px;
}
/* 时分秒数字区域的样式设置 */
.box1 {
margin-right: 10px;
width: 100px;
height: 100px;
line-height: 100px;
float: left;
border: gray 1px solid;
}
/* 冒号区域的样式设置 */
.box2 {
width: 30px;
float: left;
margin-right: 10px;
}
效果图如下: