电子时钟代码

电子时钟代码/*电子时钟总体样式设置*/#clock{width:800px;font-size:80px;font-weight:bold;color:red;text-align:center;margin:20px;}/*时分秒数字区域的样式设置*/.box1{margin-right:10px;width:100px;height:100px;line-height:100px;…

大家好,又见面了,我是你们的朋友全栈君。

/*电子时钟总体样式设置*/
#clock {

    width: 800px;
    font-size: 80px;
    font-weight: bold;
    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;
}

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154099.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 郁闷!

    郁闷!

  • frp内网穿透服务使用

    frp内网穿透服务使用frp是一个专注于内网穿透的高性能的反向代理应用,支持TCP、UDP、HTTP、HTTPS等多种协议。可以将内网服务以安全、便捷的方式通过具有公网IP节点的中转暴露到公网。frp是一个开源的内网穿透应用,有客户端软件和服务端软件,大概工作过程如下服务端运行在具有公网IP的服务器上,比如Linux上,并监听某个端口,等待客户端连接。客户端运行在需要穿透的内网机器上,比如本地电脑上,连接到服务器之后,服务器开始监听客户端需要穿透的指定端口。……………………

  • unity2d3d结合_unity3d脚本编程与游戏开发

    unity2d3d结合_unity3d脚本编程与游戏开发Unity3D数字孪生笔记(八)一、脚本介绍1、脚本1>介绍2>语法结构3>编译过程4>修改脚本模板2、开发工具1>MonoDevelop2>VisualStudio3>Console3、脚本生命周期4、调试1>使用Unity编辑器2>使用VS3>使用MonoDevelop二、常用API1、Component2、Transform3、GameObject4、Time一、脚本介绍1、脚本1>介绍脚本是附加在游戏物体上用于定义游戏对

  • 如何使用Vue封装组件[通俗易懂]

    如何使用Vue封装组件[通俗易懂]首先了解一下封装组件的步骤:1.props:父传子2.事件(派发和监听)this.$emit()派发事件通过@或$on来监听事件3.slot(插槽),内容分发命名插槽<slotname=”命名插槽名”></slot>例如:<slotname=”ssl”></slot>使用:<divslot=”ssl”>…..</div>想封装组件呢首先要思考:1.你想向用户暴露哪些属性(

  • windows开机后一键启动应用程序[通俗易懂]

    一键启动办公软件小工具分享每天上班前打开电脑总有一些固定的软件需要打开(如Foxmail、QQ等),那么一个一个启动非常会比较麻烦,下面分享一下小工具,稍微进行简单的配置后,便可以一键启动你想要打开的软件!

  • 国产Linux系统再添一员猛将,颜值完全不输苹果!

    国产Linux系统再添一员猛将,颜值完全不输苹果!这颜值我爱了~

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号