1、首先写一个div用于显示获取到的日期和时间
2、为了方便查看,给显示日期的div写个样式
<style>
* {
margin: 0;
padding: 0;
}
.show {
width: 200px;
height: 45px;
line-height: 45px;
text-align: center;
border: 1px solid #000;
}
</style>
3、通过jQuery的方法获取到当前的时间并格式化,动态每秒更新变化显示
$(document).ready(function () {
function updateDate() {
var currentDate = new Date();
var date = currentDate.getDate(); // 获取当前日
var month = currentDate.getMonth() + 1; // 获取当前月份(0——11)
var year = currentDate.getFullYear(); // 获取当前年份
var hours = currentDate.getHours(); // 获取当前时
var minutes = currentDate.getMinutes(); // 获取当前分
var seconds = currentDate.getSeconds(); // 获取当前秒
// 格式化月份、日期、秒,保持两位数
month = (month < 10 ? "0" : "") + month;
date = (date < 10 ? "0" : "") + date;
seconds = (seconds < 10 ? "0" : "") + seconds;
// 将格式化后的日期显示在页面上的指定元素中
$(".show").text(year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds);
};
// 每秒更新一次日期
setInterval(updateDate, 1000);
})