我正在尝试为一个网页做一个CSS加载器。
但是，JS函数的后半部分对main类的设置样式不起作用。加载程序离开，但下一个内容没有显示出来。
null
const loader = document.querySelector('.loader')
const main = document.querySelector('.main')
function init() {
setTimeout(() => {
loader.style.opacity = 0;
laoder.style.display = 'none';
main.style.display = 'block';
setTimeout(() => (main.style.opacity = 1), 50);
}, 3000);
}
init();@import url('https://googleapis.com/css?family:Lato|ZCOOL+KuaiLe&display=swap');
body {
font-family: 'Lato', sans-serif;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
.loader {
height: 50px;
animation: rotate 3s linear infinite;
transform-origin: bottom center;
}
.circle {
background-color: #1f168a;
height: 40px;
width: 40px;
border-radius: 50%;
animation: grow 1.5s linear infinite;
transform: scale(0);
margin: -10px;
}
.circle:nth-child(2) {
background-color: #a8caff;
animation-delay: 0.5s;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes grow {
50% {
transform: scale(1);
}
}
.main {
text-align: center;
width: 90%;
opacity: 0;
display: none;
transition: opacity 1s ease-in;
color: white;
font-size: 40px;
}<!DOCTYPE html>
<html>
<head>
<title>
CSS Loader CSI
</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="loader.css">
</head>
<body>
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
</div>
<section class="main">
<h1>Jaideep Singh
<h1>
</section>
<script src="loader.js"></script>
</body>
</html>null
你打错了。您在此处拼写了laoder而不是loader:laoder.style.display='none'；
null
const loader = document.querySelector('.loader')
const main = document.querySelector('.main')
function init(){
setTimeout(() => {
loader.style.opacity = 0;
loader.style.display = 'none';
main.style.display = 'block';
setTimeout(() => (main.style.opacity = 1), 50);
}, 3000);
}
init();@import url('https://googleapis.com/css?family:Lato|ZCOOL+KuaiLe&display=swap');
body {
font-family: 'Lato', sans-serif;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
.loader {
height: 50px;
animation: rotate 3s linear infinite;
transform-origin: bottom center;
}
.circle {
background-color: #1f168a;
height: 40px;
width: 40px;
border-radius: 50%;
animation: grow 1.5s linear infinite;
transform: scale(0);
margin: -10px;
}
.circle:nth-child(2) {
background-color: #a8caff;
animation-delay: 0.5s;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes grow {
50% {
transform: scale(1);
}
}
.main {
text-align: center;
width: 90%;
opacity: 0;
display: none;
transition: opacity 1s ease-in;
color: white;
font-size: 40px;
}<!DOCTYPE html>
<html>
<head>
<title>
CSS Loader CSI
</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="loader.css">
</head>
<body>
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
</div>
<section class="main">
<h1>Jaideep Singh<h1>
</section>
<script src="loader.js"></script>
</body>
</html>
.main {
text-align: center;
width: 90%;
opacity: 0;
transition: opacity 1s ease-in;
color: white;
font-size: 40px;
}
function init() {
setTimeout(() => {
loader.style.opacity = 0;
main.style.opacity = 1;
}, 3000);
}
