通过学习JavaScript知识,实现时钟动态效果
时钟动态效果的实现
使用 document.getElementById0方法获取用于显示时分秒的3个显示框对象。
在 JavaScript 中创建自定义函数方法 getCurrentTime(),用于获取当前时间并显示在页面中。
在该段代码中首先使用了 JavaScript 中的Date 对象获取当前时间的时分秒具体数值,为确保每次均显示成两位数的效果,分别判断当前时分秒是否小于 10,如果比10 小则在前面加一个数字 0,然后将修改后的数值使用 innerHTML 属性显示到对应的时间显示框中。
将 getCurrentTime()函数添加到<body>标签的 onload 事件中,以确保每次打开页面就立刻显示当前时间。
最后在 JavaScript 代码部分添加 setlnterval()方法,设置成每秒钟重新调用一次获取当前时间并显示在页面上的 getCurrentTime()函数。
setInterval("getCurrentTime()", 1000);
其中,第1个参数表示的是需要调用的函数名称;第2个参数表示的是间隔时间,其单位毫秒,1000毫秒=1秒。
图1-1电子时钟的样式效果图
由图1-1可见,时钟显示的内容动态变化的功能已实现。至此,电子时钟的制作己全部完成。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单时钟设计实现</title>
<style>
#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;
}
</style>
</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>
<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;
if (m < 10)
m = "0" + m;
if (s < 10)
s = "0" + s;
hour.innerHTML = h;
minute.innerHTML = m;
second.innerHTML = s;
}
setInterval("getCurrentTime()", 1000);
</script>
</body>
</html>