js+html+css实现简单电子时钟

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本文实例为大家分享了js+html+css实现简单电子时钟的具体代码，供大家参考，具体内容如下

最终结果：

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2.1简单电子时钟的设计与实现</title>
        <link rel="stylesheet" type="text/css" 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>
    </body>
</html>

css部分


#clock{
    width:800px;
    font-size: 80px;
    font-weight: bold;
    color: #008B8B;
    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;
}

js部分

——使用外链时不需加<script>标签，不使用外链则直接写在<body>标签内

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉