起个网名好难 发表于 2023-6-8 16:26

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

<css-doodle id="cdblk">
    :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;
</css-doodle>

<script>
(function() {
    let script = document.createElement('script');
    script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    document.head.appendChild(script);
    window.onload = () => {
        let cells = cdblk.shadowRoot.querySelectorAll('cell');
        for(i = 0; i < cells.length; i++)        {
                cells.innerHTML= '<span style="color:red;">@index = ' + (i + 1) + '</span>id = ' + cells.id;
        }
    }
})();
</script>

起个网名好难 发表于 2023-6-8 16:28

对于 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块
<css-doodle id="cdblk">
    :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;
</css-doodle>

<script>
(function() {
    let script = document.createElement('script');
    script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    document.head.appendChild(script);
    window.onload = () => {
        let cells = cdblk.shadowRoot.querySelectorAll('cell');
        for(i = 0; i < cells.length; i++)        {
                cells.innerHTML= '<span style="color:red;">@index = ' + (i + 1) + '</span>id = ' + cells.id;
        }
    }
})();
</script>

醉美水芙蓉 发表于 2023-6-8 17:07

红影 发表于 2023-6-8 18:47

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

樵歌 发表于 2023-6-8 18:53

我帮你取个网名如何{:4_173:}

红影 发表于 2023-6-8 18:58

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

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

红影 发表于 2023-6-8 19:04

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

起个网名好难 发表于 2023-6-8 20:15

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

谢谢你的支持！

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

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

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

谢谢你的支持！

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

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

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

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

好啊，好啊 {:5_106:}

起个网名好难 发表于 2023-6-8 20:24

红影 发表于 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 20:26

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

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

红影 发表于 2023-6-8 22:15

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

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


以前没接触过这个标签呢，感觉特别陌生{:4_173:}

红影 发表于 2023-6-8 22:18

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

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

红影 发表于 2023-6-8 22:20

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

嗯嗯，这种表达方式也不熟。我对代码太不熟了{:4_173:}

梦缘 发表于 2023-6-9 16:58

感谢老师的分享，您辛苦了。{:4_190:}

樵歌 发表于 2023-6-9 18:30

起个网名好难 发表于 2023-6-8 20:17
好啊，好啊
赅老大。如何{:4_173:}

起个网名好难 发表于 2023-6-9 20:23

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

谢谢你的支持，晚上好！

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

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

这个，这个…… {:5_110:}

樵歌 发表于 2023-6-10 20:29

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

要不换一个{:4_189:}
页: [1] 2
查看完整版本: css-doodle 单元格的 index 和 对应cell 的 id