我正在制作一个带有不同可点击框的日历。 这些框都是一个较大的.png图像的一部分，该图像被均匀地划分为代表不同周的较小框。
这些框应该是可点击的，并根据它们是哪个框，将用户引导到不同的页面。 我正在使用和标记来执行此操作。 但是，因为有许多方框是均匀间隔的，所以我不想手工键入标签，特别是因为它们可能会根据用户想要多少方框（年份）而改变。
下面是index.html文件，我已经有了第一个带有各自坐标和链接的框。 但是，我不想用手敲出每个坐标和链接。
<!DOCTYPE html>
<html>
<body>
<h1>Your Life Calendar</h1>
<p>Click on a specific box to be transported to that timeframe.</p>
<img src="poster.png" alt="Life Calendar" usemap="#calendar" width="515" height="760">
<map name="calendar">
<area shape="rect" coords="0,0,5,5" alt="Week 1" href="#week-1">
</map>
</body>
</html>
理想情况下，我希望在JavaScript中使用for-loop来根据用户希望的框数动态创建这些标记。 每个框的x坐标每次增加10，最多达到520，然后重置为0，而y坐标跳变10，最多达到变量life_expectancy（例如76）。
但是，我对JavaScript不熟悉，因此无法达到我想要的结果。
我不太确定您正在构建什么，但我的想法如下:
与其用成千上万个元素来膨胀DOM，您所需要的只是:
想象一个“虚拟”网格。。。
我们所需要的只是一个相对的单击坐标和一些简单的数学来获得行/列索引
rel_x=event.clientx-event.target.GetBoundingClientRect().leftrel_y=event.client-event.target.GetBoundingClientRect().top和一些简单的数学方法来检索周数甚至颜色:
null
const weeks_red = 64; // Say 64 weeks are red.
const cell_size = 10; // px (Including some black area margin)
const cells_row = 14; // cells per row (adjust as your img implies)
const $weekMap = $("#weeksMap");
$weekMap.on("click", (ev) => {
const bcr = ev.target.getBoundingClientRect();
const cli = { left: ev.clientX, top: ev.clientY };
// Calculate relative mouse coordinates
const rel = {
x: cli.left - bcr.left,
y: cli.top - bcr.top
};
// Calculate row, col indexes
const row = Math.floor(rel.y / cell_size);
const col = Math.floor(rel.x / cell_size);
const week_idx = row * cells_row + col; // Retrieve 0-based index
const week_num = week_idx + 1; // Since indexes are 0 based
const week_color = week_num > weeks_red ? "green" : "red";
console.clear(); console.log(`Week ${week_num} is ${week_color}`);
});#weeksMap {
cursor: pointer;
}Click on a square:<br>
<img id="weeksMap" src="https://i.stack.imgur.com/7XiKD.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>