js实现日历与定时器

JS实现日历与定时器完整攻略

1. JS实现日历

1.1 核心思路

• 获取当地时间（年、月、日）；
• 定义一个方法，将获取到的时间以日历的形式渲染到页面中；
• 监听页面上的事件，实现日历的下一页、上一页功能；
• 实现日历的跳转到具体某一天的功能。

1.2 代码实现

// 获取当前日期
function getDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth() + 1;
    const date = today.getDate();
    return { year, month, date };
}

const date = getDate();

// 将日期渲染到页面中
function renderCalendar() {
    const { year, month, date } = getDate();
    // ...
}

renderCalendar();

// 监听事件，实现日历翻页功能
document.getElementById('prev').addEventListener('click', () => {
    // ...
});

document.getElementById('next').addEventListener('click', () => {
    // ...
});

// 跳转到具体某一天
document.getElementById('jumpBtn').addEventListener('click', () => {
    const jumpInput = document.getElementById('jumpInput').value;
    // ...
});

1.3 示例说明

示例一：渲染日历

我们可以在页面中插入一个 div 元素，然后在该元素中渲染日历，代码如下：

<div id="calendar"></div>

<script>
function renderCalendar() {
    // ...
    document.getElementById('calendar').innerHTML = calendarHtml;
}

renderCalendar();
</script>

示例二：下一页、上一页功能

我们可以在页面中插入两个按钮元素，分别为“上一页”和“下一页”，并为这两个按钮元素添加点击事件，代码如下：

<button id="prev">上一页</button>
<button id="next">下一页</button>

<script>
document.getElementById('prev').addEventListener('click', () => {
    // ...
    renderCalendar();
});

document.getElementById('next').addEventListener('click', () => {
    // ...
    renderCalendar();
});
</script>

2. JS实现定时器

2.1 核心思路

• 定义一个方法，作为定时器的回调函数；
• 使用 setInterval 函数开启定时器，执行回调函数；
• 使用 clearInterval 函数结束定时器。

2.2 代码实现

// 定时器回调函数
function timerCallback() {
    // ...
}

// 开启定时器
const timerId = setInterval(timerCallback, 1000);

// 结束定时器
clearInterval(timerId);

2.3 示例说明

示例一：定时器精简版

我们可以在页面中插入一个 button 元素，点击该按钮即可开启定时器，代码如下：

<button id="startBtn">开始定时器</button>

<script>
function timerCallback() {
    // ...
}

let timerId = null;

document.getElementById('startBtn').addEventListener('click', () => {
    if (!timerId) {
        timerId = setInterval(timerCallback, 1000);
    }
});
</script>

示例二：定时器带有时钟显示

我们可以在页面中插入一个 div 元素，然后在该元素中渲染时钟显示，代码如下：

<div id="clock"></div>

<script>
function renderClock() {
    // ...
    document.getElementById('clock').innerHTML = timeHtml;
}

function updateTime() {
    // ...
    renderClock();
}

setInterval(updateTime, 1000);
</script>