【电子时钟的设计与实现】

最新推荐文章于 2024-06-21 10:02:59 发布

m0_71941456

最新推荐文章于 2024-06-21 10:02:59 发布

阅读量1.8k

点赞数 43

文章标签：前端

本文链接：https://blog.csdn.net/m0_71941456/article/details/135507532

版权

本文详细介绍了如何使用HTML5、CSS和JavaScript来设计一个包含时分秒显示框的简单电子时钟，包括整体布局、时分秒数字与冒号的样式设置，以及使用JavaScript实现动态更新时间的代码示例。

摘要由CSDN通过智能技术生成

文章目录

1.界面设计
- 1.1整体设计
- 1.2时分秒显示框的设计
2.时钟动态效果的实现
3.完整代码展示

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;
  }

效果图如下: 在这里插入图片描述

m0_71941456

关注

43
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
【电子时钟的设计与实现】

在该段代码中首先使用了JavaScript中的Date对象获取当前时间的时分秒具体数值，为确保每次均显示成两位数的效果，分别判断当前时分秒是否小于10，如果比10小则在前面加一个数字0，然后将修改后的数值使用innerHTML属性显示到对应的时间显示框中。在id="clock"的div元素内部添加3个div子元素用于显示时分秒的具体数字，并为其分别设置自定义id名称为 h、m、s(取 hour、minute 和 second 的首字母)。在CSS文件中为div标签设置样式，具体样式要求如下。
复制链接

扫一扫