【1】利用Javascript实现时钟效果
时间: 2024-02-27 12:59:06 浏览: 26
可以通过以下代码实现一个简单的时钟效果:
HTML部分:
```html
<div id="clock"></div>
```
JavaScript部分:
```javascript
function showTime() {
var date = new Date(); // 获取当前时间
var h = date.getHours(); // 获取小时数
var m = date.getMinutes(); // 获取分钟数
var s = date.getSeconds(); // 获取秒数
var session = "AM"; // 默认为上午
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h; // 如果小时数只有一位,补0显示
m = (m < 10) ? "0" + m : m; // 如果分钟数只有一位,补0显示
s = (s < 10) ? "0" + s : s; // 如果秒数只有一位,补0显示
var time = h + ":" + m + ":" + s + " " + session; // 拼接时间字符串
document.getElementById("clock").innerText = time; // 将时间字符串赋值给div元素
setTimeout(showTime, 1000); // 每秒钟调用一次showTime函数
}
showTime(); // 页面加载完成后立即调用showTime函数
```
上述代码中,我们首先定义了一个`showTime`函数,用于获取当前时间并显示在页面上。在函数内部,我们通过`Date`对象获取当前时间,并将小时、分钟、秒、上午/下午等信息提取出来。然后,我们对小时数进行处理,如果小时数为0,则将其设为12;如果小时数大于12,则将其减去12,并将上午/下午标志设为“PM”。接着,我们将这些信息拼接成一个时间字符串,并将其赋值给HTML页面上的一个div元素。最后,我们通过`setTimeout`函数每秒钟调用一次`showTime`函数,实现时钟效果。