第一章 JavaScript基础项目
1.1 电子时钟的设计与实现
功能实现:设计一款简单的电子时钟,要求实现显示当前的时分秒,并且可以每秒更新一次实现动态效果。
1.1.1时分秒显示框的设计
3个< div >子元素用于展示时分秒的具体数字,该段代码为3个显示框定义了相同的类名称box1,以便在CSS样式表中可以使用类选择器为其设置统一样式。
HTML5代码片段:
<body >
<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>
CSS 代码片段:
#clock{
width:800px;
font-size:80px;
font-weight:bold;
color:rgb(74, 140, 145);
text-align