脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js电子时钟

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

 更新时间：2022年06月20日 08:40:53   作者：好多bug  
这篇文章主要为大家详细介绍了js+html+css实现简单电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

您可能感兴趣的文章:

相关文章

  • Javascript中的this绑定介绍

    Javascript中的this绑定介绍

    在Javascript里，函数被调用的时候，除了接受声明是定义的形式参数，每一个函数还接受两个附加的参数：this和arguments。
    2011-09-09
  • Bootstrap中CSS的使用方法

    Bootstrap中CSS的使用方法

    这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 使用canvas实现仿新浪微博头像截取上传功能

    使用canvas实现仿新浪微博头像截取上传功能

    用户提供图像大小尺寸不合适，如何用截取上传呢？接下来小编教大家使用使用canvas实现仿新浪微博头像截取上传功能解决问题，需要的朋友一起学习吧。
    2015-09-09
  • webpack loader使用的安装配置

    webpack loader使用的安装配置

    这篇文章主要为大家介绍了webpack loader使用的安装配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • JavaScript检测字符串中是否含有html标签实现方法

    JavaScript检测字符串中是否含有html标签实现方法

    这篇文章主要介绍了JavaScript检测字符串中是否含有html标签实现方法,本文直接给出实现代码,需要的朋友可以参考下
    2015-07-07
  • Ajax Blog 用到的几个函数

    Ajax Blog 用到的几个函数

    Ajax Blog 用到的几个函数...
    2006-10-10
  • 自己做的模拟模态对话框实现代码

    自己做的模拟模态对话框实现代码

    最近做完一个项目，发现浏览器兼容问题，模态对话框只有IE支持，但是IE9又不能支持带框架的对话框，那个对话框的大小打死都设置不了，在网上查说因为好多功能被IE9屏蔽了，于是自己做了一个模拟对话框的东西
    2012-05-05
  • 使用原生js实现拖拽和粘贴上传图片功能

    使用原生js实现拖拽和粘贴上传图片功能

    这篇文章主要介绍了使用原生js实现拖拽和粘贴上传图片功能,Vue/Rect 生态用多了都快忘记原生js怎么写了,今天需要直接在服务器裸写个页面,实现 textarea 文本框里接收拖拽多个图片,需要的朋友可以参考下
    2024-04-04
  • JavaScript中判断对象是否为空的方法小结

    JavaScript中判断对象是否为空的方法小结

    在JavaScript中,判断一个对象是否为空可以有多种方法,这篇文章主要为大家详细介绍了几种常见的方法,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • JS使用canvas技术模仿echarts柱状图

    JS使用canvas技术模仿echarts柱状图

    这篇文章主要介绍了JS使用canvas技术模仿echarts柱状图，对canvas感兴趣的同学，可以参考下
    2021-04-04

最新评论