使用`
Date`对象设计动态
显示当前
日期、
星期的时钟
和倒计时时钟可按以下步骤实现。
### 动态
显示当前
日期、
星期的时钟
- **声明
日期时间函数**：借助`new
Date()`获取当前时间。
```
javascript
let
date = new
Date();
```
- **
使用常用方法获取时间信息**：可
使用`get
Date()`获取日（1 - 31），`getDay
()`获取
星期（0 - 6），`getMonth
()`获取月（0 - 11），`getFullYear
()`获取完整年份。
```
javascript
let day =
date.get
Date();
let week =
date.getDay
();
let month =
date.getMonth
() + 1; // 月份从0开始，
显示时加1
let year =
date.getFullYear
();
```
- **结合`setInterval
()`定时器实现动态
显示**：
```
javascript
function showCurrentTime
() {
let
date = new
Date();
let day =
date.get
Date();
let week =
date.getDay
();
let month =
date.getMonth
() + 1;
let year =
date.getFullYear
();
let weekArr = ['
星期日', '
星期一', '
星期二', '
星期三', '
星期四', '
星期五', '
星期六'];
let timeStr = `${year}-${month}-${day} ${weekArr[week]}`;
document.getElementById
('currentTime'
).innerHTML = timeStr;
}
setInterval
(showCurrentTime, 1000
);
```
### 倒计时时钟
- **获取当前时间
和结束时间**：
```
javascript
var now = new
Date(); // 当前时间
var end = new
Date("2024-12-31 23:59:59"
); // 结束时间
```
- **计算时间差（毫秒值）并转换为秒数**：
```
javascript
var diff =
(end.getTime
() - now.getTime
()) / 1000;
```
- **计算剩余的小时、分钟
和秒数**：
```
javascript
function showCountdown
() {
if
(diff < 0
) {
document.getElementById
('countdown'
).innerHTML = "活动结束了";
return;
}
var h = parseInt
(diff / 3600
); // 剩余的小时
var m = parseInt
((diff - h * 3600
) / 60
); // 剩余的分钟
var s = parseInt
(diff - h * 3600 - m * 60
); // 剩余的秒数
document.getElementById
('countdown'
).innerHTML = `${h}小时${m}分钟${s}秒`;
}
```
- **结合`setInterval
()`定时器实现每秒更新倒计时**：
```
javascript
var timer = setInterval
(function
() {
diff--;
if
(diff < 0
) {
clearInterval
(timer
);
document.getElementById
('countdown'
).innerHTML = "活动结束了";
} else {
showCountdown
();
}
}, 1000
);
```
### 完整示例代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟与倒计时</title>
</head>
<body>
<div id="currentTime"></div>
<div id="countdown"></div>
<script>
function showCurrentTime
() {
let
date = new
Date();
let day =
date.get
Date();
let week =
date.getDay
();
let month =
date.getMonth
() + 1;
let year =
date.getFullYear
();
let weekArr = ['
星期日', '
星期一', '
星期二', '
星期三', '
星期四', '
星期五', '
星期六'];
let timeStr = `${year}-${month}-${day} ${weekArr[week]}`;
document.getElementById
('currentTime'
).innerHTML = timeStr;
}
setInterval
(showCurrentTime, 1000
);
var now = new
Date();
var end = new
Date("2024-12-31 23:59:59"
);
var diff =
(end.getTime
() - now.getTime
()) / 1000;
function showCountdown
() {
if
(diff < 0
) {
document.getElementById
('countdown'
).innerHTML = "活动结束了";
return;
}
var h = parseInt
(diff / 3600
);
var m = parseInt
((diff - h * 3600
) / 60
);
var s = parseInt
(diff - h * 3600 - m * 60
);
document.getElementById
('countdown'
).innerHTML = `${h}小时${m}分钟${s}秒`;
}
var timer = setInterval
(function
() {
diff--;
if
(diff < 0
) {
clearInterval
(timer
);
document.getElementById
('countdown'
).innerHTML = "活动结束了";
} else {
showCountdown
();
}
}, 1000
);
</script>
</body>
</html>
```
这是一个JavaScript函数，用于获取当前日期并格式化为年月日星期几时分秒的形式。它将日期转换为指定格式的字符串，包括年、月、日、星期、小时、分钟和秒，并确保每位数前补零。例如，返回'2023年02月09日星期四15:30:45'。
扫一扫
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
