本文实例为大家分享了js+html+CSS实现简单电子时钟的具体代码，供大家参考，具体内容如下 最终结果： HTML部分 <!DOCTYPE html> <htm
本文实例为大家分享了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>--结束END--
本文标题: js+html+css实现简单电子时钟
本文链接: https://www.lsjlt.com/news/151941.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0