项目知识点

1. 直接获取26个英文字母

const letterArr: Array<string> = [];
// String. fromCharCode()根据ASCII码转换成英文字母，A是65
for(leti=65;i<91;i++){
    
letterArr . push(String. fromCharCode(i));
}

2.进度条

• 圆环进度条

整个圆环是在正方形框中，
将正方形框的左半边设置一个矩形框，里面放了一个圆环，左半边的矩形框设置overflow:hidden。

将方形框的右半边设置一个矩形框，里面放了一个圆环，右半边的矩形框也设置overflow:hidden.

左半边的圆设置左边和底下是透明的，右半边的圆设置右边和上边是透明的。

然后开始旋转，先是右边转，在0%-50%的时候从45度转到225度。
然后左边转，在50%-100%时从45度转到225度。
/*圆环进度条*/.box {
    
height: 100px;
position: relative;
width: 100px;
}
/*左半边的一个矩形框*/.leftRect{
    
}
/*右半边的矩形框*/.rightRect{
    
height: 100px;
width: 50px;
position: absolute;
top:0;
right: 0;
overflow: hidden;
}

/*左半边的圆,只有下面和左边的border是有颜色的，其他的是透明的*/.leftcircle{
    
以下两个相似
/*右半边的圆，只有右边和上边的border是有颜色的，其他的是透明的*/.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;
}
}
}

• 旋转进度条

.process {
    
	width: 35px;
	height: 35px;
}
/*设置loader-1的宽和高，设置border-radius，使其显示为圆形*/.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;
}
/*动画效果，一开始旋转0度，50%旋转180度，100%旋转360度*/
@keyframes .process {
    
0% {
    transform: rotate(0deg);}
50% {
    transform: rotate(180deg);}
100% {
    transform: rotate(360deg);}
}

3.设置鼠标右键自定义事件

<div id="myBox">当你右键点击我时，会出现自定义事件，当你单击时，自定义取消。</div>
    <ul class="lists">
        <li>
            <a href="www.baidu.com">百度一下，你就知道</a>
        </li>
        <li>
            <a href="www.google.com">Google</a>
        </li>
        <li>
            <a href="cn.bing.com">必应</a>
        </li>
        <li>努力学习，好好工作</li>
        <li>月薪50k</li>
    </ul>

  <script>
        window.onload = function () {
    
            let menu = document.querySelector('.lists'),
                myBox = document.getElementById('myBox');
            myBox.addEventListener('contextmenu', function(event){
    
                // 阻止浏览器鼠标右击事件。
                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>