Javascript 如何创建<；面积>；HTML中有循环的元素？

我正在制作一个带有不同可点击框的日历。这些框都是一个较大的

.png

图像的一部分，该图像被均匀划分为代表不同周的较小框

这些框应该是可点击的，并根据它们所在的框将用户引导到不同的页面。我正在使用和标记来执行此操作。但是，因为有许多框是均匀分布的，所以我不想手动键入标签，特别是因为它们可能会根据用户想要的框数（年数）而改变

下面是

index.html

文件，我已经有了第一个框及其各自的坐标和链接。但是，我不想手动键入每个坐标和链接

你的生活日历
单击要传输到该时间段的特定框

我不太确定你在建什么，但以下是我的想法：
您所需要的是：

想象一个“虚拟”网格…
我们所需要的只是一个相对的点击坐标和一些简单的数学来获得行/列索引

• 使用：
  获取元素内的相对坐标

  rel\u x=event.clientX-event.target.getBoundingClientRect（）.left

  
  

  rel_y=event.clientY-event.target.getBoundingClientRect（）.top

还有一些简单的数学来检索周数甚至颜色：

const weeks\u red=64；//比如说64周是红色的。
常量单元格大小=10；//px（包括一些黑色区域边距）
常量单元格\u行=14；//每行单元格数（根据img的提示进行调整）
const$weekMap=$（“#weeksMap”）；
$weekMap.on（“点击”，（ev）=>{
常量bcr=ev.target.getBoundingClientRect（）；
constcli={left:ev.clientX，top:ev.clientY}；
//计算相对鼠标坐标
常数rel={
x:cli.left-bcr.left，
y:cli.top-bcr.top
};
//计算行、列索引
常量行=数学楼层（相对y/单元大小）；
const col=数学楼层（相对x/单元大小）；
const week\u idx=row*cells\u row+col；//检索基于0的索引
const week\u num=week\u idx+1；//因为索引是基于0的
const week\u color=week\u num>weeks\u red？“绿色”：“红色”；
console.clear（）；console.log（`Week${Week\u num}是${Week\u color}`）；
});
#周地图{
光标：指针；
}
点击正方形：

使用超链接（
）和CSS网格将它们对齐可能更有意义。