css-doodle 单元格的 index 和 对应cell 的 id

起个网名好难

:doodle { @grid: 4x3; @size: 1024px 640px; box-shadow: 0 0 8px #000; position: relative; margin: 100px 0 32px -200px; grid-gap:1px; } background: teal ;content: @index;color: white;

起个网名好难

对于 n列 x m行 的 css-doodle 块 其单元格的 @index 是 1  到 （n x m）按 从左到右、从上到下依次排列；

每个单元格对应的html标签 cell 都有一个唯一的id， 形式为 c-列号-行号-1，例如 c-3-2-1 是第二行第三列的单元格的cell 所有的 id ；

单元格@index 和 cell 的 id 的关系可以表示为： @index = n * (行号 - 1) + 列号 。

楼上例是个 3行4列 的 css-doodle块

1. <css-doodle id="cdblk">
   
2.     :doodle {
   
3.         @grid: 4x3;
   
4.         @size: 1024px 640px;
   
5.         box-shadow: 0 0 8px #000;
   
6.         position: relative;
   
7.         margin: 100px 0 32px -200px;
   
8.         grid-gap:1px;
   
9.     }
   
10.     background: teal ;content: @index;color: white;
    
11. </css-doodle>
    
12. 
    
13. <script>
    
14. (function() {
    
15.     let script = document.createElement('script');
    
16.     script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    
17.     document.head.appendChild(script);
    
18.     window.onload = () => {
    
19.         let cells = cdblk.shadowRoot.querySelectorAll('cell');
    
20.         for(i = 0; i < cells.length; i++)        {
    
21.                 cells[i].innerHTML  = '<span style="color:red;">@index = ' + (i + 1) + '</span>  id = ' + cells[i].id;
    
22.         }
    
23.     }
    
24. })();
    
25. </script>

复制代码

红影

感谢难难，一直对 cell 不明白是什么，看到这个能知道点了

樵歌

我帮你取个网名如何

红影

起个网名好难 发表于 2023-6-8 16:28
对于 n列 x m行 的 css-doodle 块 其单元格的 @index 是 1  到 （n x m）按 从左到右、从上到下依次排列；
...

@index = n * (行号 - 1) + 列号 。这个公式没看明白，n是列么？

红影

JS里的@index = ' + (i + 1) + '</span>  id = ' + cells[i].id;也没懂，我还是赶紧跑去学习吧

起个网名好难

醉美水芙蓉 发表于 2023-6-8 17:07
我就进来看看老师的制作！

谢谢你的支持！

这就是个学习笔记帖，记下点学习体会。

起个网名好难

红影 发表于 2023-6-8 18:47
感谢难难，一直对 cell 不明白是什么，看到这个能知道点了

谢谢你的支持！

这就是个学习笔记帖，记下点学习体会。

cell 就是个html的标签，和div、p、span 等一样，css-doodle 里它对应的就是每个单元格

起个网名好难

樵歌 发表于 2023-6-8 18:53
我帮你取个网名如何

好啊，好啊

起个网名好难

红影 发表于 2023-6-8 18:58
@index = n * (行号 - 1) + 列号 。这个公式没看明白，n是列么？

对的， n 是总的列数 ， 例如 @grid: 5; 就是 5列 5行， n = 5; 若 id = c-2-2-1 即 它是第二行的第二列的单元格，于是 @i = 5 * （2 - 1）+ 2 = 7 ；

起个网名好难

红影 发表于 2023-6-8 19:04
JS里的@index = ' + (i + 1) + '  id = ' + cells.id;也没懂，我还是赶紧跑去学习吧

那个只是要把对应的单元格序号 和 相应的 id 显示出来， 没什么特殊意义。

红影

起个网名好难 发表于 2023-6-8 20:17
谢谢你的支持！

这就是个学习笔记帖，记下点学习体会。

以前没接触过这个标签呢，感觉特别陌生

红影

起个网名好难 发表于 2023-6-8 20:24
对的， n 是总的列数 ， 例如 @grid: 5; 就是 5列 5行， n = 5; 若 id = c-2-2-1 即 它是第二行的第二列 ...

哦，原来是总列数，还以为是当前列呢，后面的列号才是当前列。嗯嗯，知道了，谢谢难难

红影

起个网名好难 发表于 2023-6-8 20:26
那个只是要把对应的单元格序号 和 相应的 id 显示出来， 没什么特殊意义。

嗯嗯，这种表达方式也不熟。我对代码太不熟了

梦缘

感谢老师的分享，您辛苦了。

樵歌

起个网名好难 发表于 2023-6-8 20:17
好啊，好啊

赅老大。如何

起个网名好难

梦缘 发表于 2023-6-9 16:58
感谢老师的分享，您辛苦了。

谢谢你的支持，晚上好！

起个网名好难

樵歌 发表于 2023-6-9 18:30
赅老大。如何

这个，这个……

樵歌

起个网名好难 发表于 2023-6-9 20:25
这个，这个……

要不换一个