js怎么获取时间,并且跟着时间变动,格式是yy-mm-dd-hh-mm-ss,也可以通过按钮修改成12小时格式或者24小时格式
时间: 2023-12-14 20:02:33 浏览: 28
你可以使用 JavaScript 中的 Date 对象来获取时间,并且通过 setInterval 函数每秒更新一次时间,代码如下:
```javascript
// 获取当前时间
function getTime() {
const date = new Date();
const year = date.getFullYear().toString().padStart(4, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
let hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
// 判断是否为12小时制
const is12HourFormat = document.getElementById('format').value === '12';
// 转换成12小时制
if (is12HourFormat) {
const ampm = hours >= 12 ? 'PM' : 'AM';
hours %= 12;
hours = hours ? hours : 12;
hours = hours.toString().padStart(2, '0');
return `${year}-${month}-${day}-${hours}-${minutes}-${seconds} ${ampm}`;
}
// 转换成24小时制
return `${year}-${month}-${day}-${hours}-${minutes}-${seconds}`;
}
// 更新时间
function updateTime() {
const time = getTime();
document.getElementById('time').textContent = time;
}
// 初始化页面
window.onload = function() {
setInterval(updateTime, 1000);
}
```
其中,getTime 函数用来获取时间,并且根据按钮的选择转换成12小时制或者24小时制。updateTime 函数用来更新页面中的时间,setInterval 函数用来每秒更新一次时间。
在 HTML 中,你需要添加以下代码:
```html
<p id="time"></p>
<button id="format" onclick="updateTimeFormat()">12小时制</button>
```
其中,time 用来显示时间,format 用来切换时间显示格式,onclick 用来触发 updateTimeFormat 函数。
最后,你需要实现 updateTimeFormat 函数来处理按钮的点击事件:
```javascript
// 切换时间显示格式
function updateTimeFormat() {
const button = document.getElementById('format');
const is12HourFormat = button.value === '12';
button.value = is12HourFormat ? '24' : '12';
button.textContent = is12HourFormat ? '24小时制' : '12小时制';
}
```
这样,你就可以实现一个能够获取时间并且根据按钮切换时间格式的页面了。