2022/1/2： JS DOM循环精灵图，红宝书第一章，某马css部分知识框架

写在前头 在我决定走前端时，大概是21年暑假，那时参加了学校的ACM集训，在坚持了一个暑假期间，我也认识到自己不是“小镇做题家” 。当然也没那做题的脑子。 之前都是一直偶尔兴趣来了学学前端。 大一折腾了很多其他的玩意(钱，嘻嘻嘻)，也赚到没几个硬币。现在大二开始好好准备春招。每天公众号打卡，没人看也无所谓。 春招倒计时 今天是2022年的第2天。准备春招的第五天。今天感觉划水了，视频看得少 每日小结 有效学习时间 4h 学习内容 今天将某马的html，css板块敲了一部分（2天的内容） 做了知识框架 也看了红宝书（JavaScript高级程序设计）的第一章。 肯定记不到，但是看了网课后，看什么DOM,BOM都行云流水，不卡壳了。 目前水平 HTML,CSS：看了某马的html，css网课，全敲完了一遍。菜鸟教程也看了一遍。 JavaScript：还在上着某马的课 2022.1.1 代码粗糙笔记 -- 知道自己每天学了啥就行，哈哈哈。 目录 css板块敲了一部分 红宝书（JavaScript高级程序设计）的第一章 DOM：P210～p212 15-循环精灵图 * { margin: 0; padding: 0; } li { list-style-type: none; } .box { width: 250px; margin: 100px auto; } .box li { float: left; width: 24px; height: 24px; background-color: pink; margin: 15px; background: url(images/sprite.png) no-repeat; }

// 1. 获取元素 所有的小li var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { // 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标 var index = i * 44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; }