29. 会动的皮卡丘-项目总结

如何去找前端素材?

codepen.io去找

如何画复杂曲线?

用Inkscape画好, 然后导出svg图片

如何做居中定位?

{
    position: relative;
    left: 50%;
    margin-left: -10px;
}

伪选择器的用法?

.eye::before{
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 20px;
    position: absolute;
    left: 8px;
    top: 3px;
    background-color: white;
}

用border来画扇形*

变成三角形然后, 再border-radius

border: 10px solid ;
width: 10px;
height: 10px;
border-color: black transparent  transparent  transparent ;
border-radius: 100px;

29.2 同时展示代码,和结果

如何同时展示代码和结果?

player.id=setInterval(()=>{
    player.n +=1
    player.demo.innerText = str.substring(0,player.n)
	player.demo_style.innerHTML=str.substring(0,player.n)
},25)

优化技巧:

1. 不要有重复的代码
2. 用hashTable代替部分判断
3. 遍历要用hasownproperty, 防止傻逼改原型, 导致自己遍历数组出来不想要的东西
4. 尽量做成类
5. 模块化, 把一大段的String, 新建一个文件, export default

import str from "/css.js"

const player = {
    n:0,
    id:undefined,
    btns:$('.buttons'),
    demo:document.querySelector("#demo"),
    demo_style:document.querySelector("#demo_style"),
    btn2timeout:{
        "btnSlow": 50,
        "btnMedium":25,
        "btnQuick":0
    },
    init:()=>{
        player.id=setInterval(player.run,25)
        player.btns.on('click','button',player.bindEvents)
    },
    run:()=>{
        player.n +=1
        if(player.n>=str.length){
            clearInterval(player.id)
        }
        player.demo.innerText = str.substring(0,player.n)
        player.demo_style.innerHTML=str.substring(0,player.n)
        document.querySelector('.code').scrollTop = 99999
    },
    bindEvents:(e)=>{
        let timeout = 50
        let btnClass = e.target.className
        if( btnClass=== `btnPause`){
            clearInterval(player.id)
            return
        }else{
            timeout = player.btn2timeout[btnClass]
        }
        clearInterval(player.id)
        player.id = setInterval(player.run, timeout)
    }
}
player.init()