Project knowledge points

1. Direct access to 26 English letters

const letterArr: Array<string> = [];
// String. fromCharCode() according to ASCII Code into English letters ,A yes 65
for(leti=65;i<91;i++){
    
letterArr . push(String. fromCharCode(i));
}

2. Progress bar

• Circle progress bar

The whole ring is in a square box ,
Set a rectangular box on the left half of the square box , There is a ring inside , The rectangular box on the left half is set overflow:hidden.

Set a rectangular box on the right half of the square box , There is a ring inside , The rectangular box on the right half is also set overflow:hidden.

The left half of the circle is set to be transparent on the left and bottom , The right half of the circle is set to be transparent on the right and top .

 Then start rotating , First turn right , stay 0%-50% From 45 Go to 225 degree .
 Then turn left , stay 50%-100% From the 45 Go to 225 degree .
/* Circle progress bar */.box {
    
height: 100px;
position: relative;
width: 100px;
}
/* A rectangular box on the left half */.leftRect{
    
}
/* Rectangular box on the right half */.rightRect{
    
height: 100px;
width: 50px;
position: absolute;
top:0;
right: 0;
overflow: hidden;
}

/* The circle on the left half , Only the bottom and left border There are colors , Others are transparent */.leftcircle{
    
 The following two are similar 
/* The circle on the right half , Only the ones on the right and above border There are colors , Others are transparent */.rightcircle{
    

box-sizing: border-box;
right:0;
width: 100px;
height: 100px;
border:20px solid black;
border-radius: 50%;
position: absolute;
border-top:20px solid transparent;
border-right:20px solid transparent;
}
}
}

• Rotate the progress bar

.process {
    
	width: 35px;
	height: 35px;
}
/* Set up loader-1 Width and height , Set up border-radius, Make it appear as a circle */.process i {
    
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(transparent 0%, white, black);
	display: block;
	animation: load-1 0.6s linear 0s infinite;
}
/* Animation effect , At the beginning of the rotation 0 degree ,50% rotate 180 degree ,100% rotate 360 degree */
@keyframes .process {
    
0% {
    transform: rotate(0deg);}
50% {
    transform: rotate(180deg);}
100% {
    transform: rotate(360deg);}
}

3. Set the right mouse button custom event

<div id="myBox"> When you right click on me , Custom events will appear , When you click , Custom cancel .</div>
    <ul class="lists">
        <li>
            <a href="www.baidu.com"> use Baidu Search , You will know </a>
        </li>
        <li>
            <a href="www.google.com">Google</a>
        </li>
        <li>
            <a href="cn.bing.com"> Bing Ying </a>
        </li>
        <li> Study hard , Work hard </li>
        <li> a monthly salary 50k</li>
    </ul>

  <script>
        window.onload = function () {
    
            let menu = document.querySelector('.lists'),
                myBox = document.getElementById('myBox');
            myBox.addEventListener('contextmenu', function(event){
    
                //  Prevent browser right click events .
                event.preventDefault();
                menu.style.visibility = 'visible';
                menu.style.left = event.clientX + 'px';
                menu.style.right = event.clientY + 'px';
            }, false);
            document.addEventListener('click', function (event) {
    
                menu.style.visibility = 'hidden';
            });
        }
    </script>