青训营笔记1

龙少有
69 阅读2分钟

这是我参与 「第五届青训营 」笔记创作活动的第3天 本文记录了我在青训营基础班学习到了一些我平时没有接触到的知识（或者不熟悉的知识）

CSS篇

字体

  1. ","风格多个字体，加载优先顺序从左到右，最后一定要设置一个通用字体族。sans-serif用的最多
  2. 英文字体写在中文字体前边

IFC

IFC 行级排版上下文

条件：只包含行级盒子的容器会建立一个IFC

规则：

  • 盒子一行内水平摆放
  • 放不下时换行线上
  • text-align 决定一行内盒子的水平对其
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动（float)元素

BFC

BFC：块级排版上下文

某些容器会创造一个BFC:

  • 根元素
  • 浮动、绝对定位、inline-block
  • flex和gird的子项
  • overflow 不是visible的块盒
  • display:flow-root;

排版规则：

  • 盒子从上到下摆放
  • 垂直margin 合并
  • BFC内盒子的margin 不会与外面的合并
  • BFC不会和浮动元素重叠

JS篇

黑夜模式

三种方式

const btn=document.getElementById("modeBtn");
btn.addEventListener("click",(e)=>{
    const body=document.body;
    if(e.target.innerHTML==="🌞"){
        body.style.backgroundColor="black";
        body.style.color="white";
        e.target.innerHTML="🌙"
    }else{
        body.style.backgroundColor="white";
        body.style.color="black";
        e.target.innerHTML="🌞"
    }
})

const btn=document.getElementById("modeBtn");
btn.addEventListener("click",(e)=>{
    const body=document.body;
    if(body.className!=="night"){
        body.className="night";
    }else{
        body.className="";
    }
})

无js方案，利用input的check伪类切换,使用label代替js

<body>
    <input id="modeCheckBox" type="checkbox">
    <div>
        <header>
            <label id="nodeBtn" for="modeCheckBox"></label>
        </header>
    </div>
</body>

#modeCheckBox{
    display:none;
}
#modeCheckBox:check + .content{
    background-color:black;
    color:white;
    transition:all 1s;
}

轮播图

可以封装一个类

里面包含多个方法

  • getSelectedItem()
  • getSelectedItemIndex()
  • slideTo()
  • slideNext()
  • slidePrevious()

监听下方原点（切换图）mouseover事件时，可以把定时轮播停掉，移开后再开始

repeat方法

重复repeat方法优化：

使用二进制左移方法（重复多时的优化，如果重复少则差不多时间）

const repeat=(string,count)=>{
    var n =count;
    if(n<0||n== Infinity){
        throw RangeError("n")
    }
    var result="";
    while(n){
        if(n%2===1){
            result+=string;
        }
        if(n>1){
            string+=string;
        }
        n>>=1
    }
    return result
}

比如repeat("*",5) 如果使用while就要循环5次，如果使用二进制(101)就只需要循环3次(oLogn时间复杂度)

循环调用

可以使用取余实现到最后一位回到第一位

index+1 % list.lenght

判断是否是4的幂

优化方式使用二进制

function isPowerOfFour(num){
    num=parseInt(num);
    return num > 0 && (num & num -1)===0 && (num & 0xAAAAAAAAAAAAA)===0
}

先判断是否大于0

num & num -1 解析：

num会让x.....1{n个0}变成x....0{n个1}

然后通过 & 操作 使得后面不同的都变成0最后得到x.....(n+1个0)

如果没有1就结果就为0 （数如果是4的幂就要是2的幂，那么转化成二进制就至少要有1个2

num & 0xAAAAAAAAAAAAA 解析：

4的幂只能在偶数上存在2

所以与一个10101010...的数进行&操作，就可以是否等于0就可以得到是否是4的幂

avatar
文章
阅读
粉丝