电子时钟的设计与实现

最新推荐文章于 2024-10-06 11:57:36 发布

YQEMMMM

最新推荐文章于 2024-10-06 11:57:36 发布

阅读量7.3k

点赞数 14

分类专栏： HTML专栏文章标签： html5 css

本文链接：https://blog.csdn.net/YQEMMMM/article/details/109151540

版权

HTML专栏专栏收录该内容

15 篇文章 9 订阅

订阅专栏

电子时钟的设计与实现

功能要求：设计一款简单的电子时钟，要求实现显示当前的时分秒，并且可以每秒更新一次实现动态效果。最终效果图如图所示。
实现效果图：
在这里插入图片描述

一、界面设计核心技术概括：
1、整体设计：
①使用<div>标签划分区域
②使用外部CSS样式表clock.css
2、时分秒显示框设计

<!--电子时钟区域-->
<div id="clock">
  <div class="box1" id="h"></div>
  <div class="box1" id="m"></div>
  <div class="box1" id="s"></div> 
</div>

 <!--电子时钟区域-->
<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>

二、时钟动态效果核心技术概括

    //获取显示小时的区域框对象
    var hour = document.getElementById("h");
    //获取显示分钟的区域框对象
    var minute = document.getElementById("m");
    //获取显示秒的区域框对象
    var second = document.getElementById("s");

        var date = new Date();
        var h = date.getHours();//获取小时
        var m = date.getMinutes();//获取分钟
        var s = date.getSeconds();//获取秒

        hour.innerHTML = h;
        minute.innerHTML = m;
        second.innerHTML = s;

三、完整代码

<html>
  <head>
    <meta charset="utf-8">
    <title>简单电子时钟的设计与实现</title>
 <link rel="stylesheet" href="css/clock.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>