How to find front-end material?

Codepen. IO to find

How do you draw complex curves?

Draw it in Inkscape and export the SVG image

How to do center positioning?

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

How to use false selectors?

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

Use border to draw sector *

Make it a triangle and then, border-radius

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

29.2 Show both code and results

How do I present both code and results?

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

Optimization tips:

  1. Don’t have duplicate code
  2. Use hashTable instead of partial judgment
  3. Hasownproperty should be used for traversal to prevent the idiot from changing the prototype and causing himself to iterate through groups of things that he doesn’t want
  4. Try to make it class
  5. Modularization, a large section of String, a new file, 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()
Copy the code