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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
用了一年时间的TypeScript了,下面这篇文章主要给大家介绍了关于TypeScript中互斥类型实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
浅谈bootstrap源码分析之scrollspy(滚动侦听)
下面小编就为大家带来一篇浅谈bootstrap源码分析之scrollspy(滚动侦听)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
require.js是一个js脚本加载器，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能2017-07-07
这篇文章主要介绍了JS获取Table中td值的方法,实例分析了javascript操作table中td的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
JavaScript实现Java中StringBuffer的方法
这篇文章主要介绍了JavaScript实现Java中StringBuffer的方法,实例分析了StringBuffer类的实现与使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了很棒的js Tab选项卡切换效果，简单的选项卡切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
深入理解javascript严格模式(Strict Mode)
Strict mode是JavaScript1.8.5引进的技术，但还没有浏览器确实可靠的实现了严格模式，所以使用时要小心并且多测试。Strict mode可以应用于整个脚本，也可以适合于单个函数。2014-11-11
JavaScript 中的类（Class）是一种新的语言特性，它让我们可以使用面向对象编程的思想来更加方便地组织和管理代码。在本文中，我们将详细介绍 JavaScript 中的类特性，感兴趣的同学可以借鉴阅读2023-05-05
BootStrap Datetimepicker 汉化的实现代码
这篇文章主要介绍了 BootStrap Datetimepicker 汉化的实现代码,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了推荐阅读的js快速判断IE浏览器(兼容IE10与IE11),因为ie11取消了很多低版本的判断，很多js都需要修改了，这里简单介绍下需要的朋友可以参考下2015-12-12
最新评论