乐趣区

关于javascript:202212-JS-DOM循环精灵图红宝书第一章某马css部分知识框架

jiezi

写在前头

在我决定走前端时，大略是 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- 循环精灵图 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            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;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 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';
        }
    </script>
</body>

</html>
退出移动版