红影 发表于 2023-6-9 13:32
变得很自在
当然
红影 发表于 2023-6-9 13:31
嗯嗯，关键看@r(1,10)的取值。这个它是自由取的。
对
红影 发表于 2023-6-9 13:30
虽然代码多了一点，但是特别喜欢
脉络还是清晰的
马黑黑 发表于 2023-6-9 13:43
当然
想差多少时间就差多少。
马黑黑 发表于 2023-6-9 13:44
对
看到你网站的那个了，多个鹰。
马黑黑 发表于 2023-6-9 13:44
脉络还是清晰的
嗯嗯，非常清晰。
真好看啊，给黑黑老师鼓掌。{:4_199:}
我看不懂代码，只能照搬。
感谢老师的分享，点赞！{:4_178:}
老师出的对比教程。。。{:4_187:}
马黑黑 发表于 2023-6-8 20:58
帖子代码
再来学习一下这个帖子，JS最后那个btns没看懂，好像btns是对应@nth(3)按钮的？那0对应的什么？
let btns = papa.shadowRoot.querySelectorAll('cell'); 那btns[ ]括号里的是按顺序的格子么？
马黑黑 发表于 2023-6-8 20:58
帖子代码
还有@nth(1)进度条里的before中height: 100%;是2px么？到after时候为什么是height: 10px;？
呵呵，越看越晕，睡去了{:4_173:}
红影 发表于 2023-6-9 22:48
再来学习一下这个帖子，JS最后那个btns没看懂，好像btns是对应@nth(3)按钮的？那0对应的什么？
JS查询到所有的元素（这里是css-doodle单元格）集合，下标从 0 开始，0 对应 css-doodle 的第一个单元格，3 对应css-doodle的第四个单元格。
红影 发表于 2023-6-9 22:54
还有@nth(1)进度条里的before中height: 100%;是2px么？到after时候为什么是height: 10px;？
伪元素 :before，进度着色，它与进度条底轨即 @nth(1) 单元格本体保持一致的尺寸；:after 伪元素是进度条辅助，它加厚是为了让鼠标点击的面积大一一点点。
红影 发表于 2023-6-9 22:54
呵呵，越看越晕，睡去了
{:4_190:}
红影 发表于 2023-6-9 22:50
let btns = papa.shadowRoot.querySelectorAll('cell'); 那btns[ ]括号里的是按顺序的格子么？
这要理解JS数组原理和css-doodle的单元格序号（@i）原理。
JS数组元素，下标从 0 开始；css-doodle单元格序号，@index ，从 1 起算。
红影 发表于 2023-6-9 16:32
嗯嗯，非常清晰。
反正不混乱
红影 发表于 2023-6-9 16:31
看到你网站的那个了，多个鹰。
{:4_190:}
红影 发表于 2023-6-9 16:30
想差多少时间就差多少。
可以随心所欲最好