我正在制作一个网站的预加载器，几秒钟后我没能隐藏它。我收到一个错误Uncaught (in promise) TypeError: loader。风格是未定义的&;我发现，javascript得到null时GetElementsByClassName下面是我的代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Table</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="hi">Multiplication Table</h1>
<div class="mosaic-loader">
<div class="cell d-0"></div>
<div class="cell d-1"></div>
<div class="cell d-2"></div>
<div class="cell d-3"></div>
<div class="cell d-1"></div>
<div class="cell d-2"></div>
<div class="cell d-3"></div>
<div class="cell d-4"></div>
<div class="cell d-2"></div>
<div class="cell d-3"></div>
<div class="cell d-4"></div>
<div class="cell d-5"></div>
<div class="cell d-3"></div>
<div class="cell d-4"></div>
<div class="cell d-5"></div>
<div class="cell d-6"></div>
</div>
<div id="webcontent">
<label>Enter the number of rows:</label>
<input type="number" id="number"
onchange
onpropertychange
onkeyuponpaste oninput="multiplicationTable()" />
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Javascript:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const loader = document.getElementsByClassName('hi mosaic-loader');
console.log(loader)
sleep(3000).then(() => { hideit() });
function hideit() {
const loader = document.getElementsByClassName('hi mosaic-loader');
loader.style.display = "none"
}
function multiplicationTable() {
var table;
table='<table id="tata" >';
var number=document.getElementById("number").value;
for(i=1;i<=number;i++){
table+='<tr>';
for(num=1;num<=number;num++){
table+='<td>'+num*i+'</td>';
}
table+='</tr>';
}
table+='</table>';
document.getElementById("result").innerHTML = table;
}
CSS:
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap');
h1 {
display: block;
color: white;
font-weight: 100;
text-align: center;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: 'Lato';
font-weight: 300;
font-size: 24px;
background: #2b2b2b;
}
.mosaic-loader {
--cell-size: 64px;
--cell-spacing: 1px;
--border-width: 1px;
--cells: 4;
--total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
display: flex;
flex-wrap: wrap;
width: var(--total-size);
height: var(--total-size);
}
.mosaic-loader > .cell {
--cell-color: white;
flex: 0 0 var(--cell-size);
margin: var(--cell-spacing);
background-color: transparent;
box-sizing: border-box;
border: var(--border-width) solid var(--cell-color);
animation: 1.5s ripple ease infinite;
}
.mosaic-loader > .cell.d-1 {
animation-delay: 100ms;
}
.mosaic-loader > .cell.d-2 {
animation-delay: 200ms;
}
.mosaic-loader > .cell.d-3 {
animation-delay: 300ms;
}
.mosaic-loader > .cell.d-4 {
animation-delay: 400ms;
}
.mosaic-loader > .cell.d-5 {
animation-delay: 500ms;
}
.mosaic-loader > .cell.d-6 {
animation-delay: 600ms;
}
.mosaic-loader > .cell:nth-child(1) {
--cell-color: #d4aee0;
}
.mosaic-loader > .cell:nth-child(2) {
--cell-color: #8975b4;
}
.mosaic-loader > .cell:nth-child(3) {
--cell-color: #64518a;
}
.mosaic-loader > .cell:nth-child(4) {
--cell-color: #565190;
}
.mosaic-loader > .cell:nth-child(5) {
--cell-color: #44abac;
}
.mosaic-loader > .cell:nth-child(6) {
--cell-color: #2ca7d8;
}
.mosaic-loader > .cell:nth-child(7) {
--cell-color: #1482ce;
}
.mosaic-loader > .cell:nth-child(8) {
--cell-color: #05597c;
}
.mosaic-loader > .cell:nth-child(9) {
--cell-color: #b2dd57;
}
.mosaic-loader > .cell:nth-child(10) {
--cell-color: #57c443;
}
.mosaic-loader > .cell:nth-child(11) {
--cell-color: #05b853;
}
.mosaic-loader > .cell:nth-child(12) {
--cell-color: #19962e;
}
.mosaic-loader > .cell:nth-child(13) {
--cell-color: #fdc82e;
}
.mosaic-loader > .cell:nth-child(14) {
--cell-color: #fd9c2e;
}
.mosaic-loader > .cell:nth-child(15) {
--cell-color: #d5385a;
}
.mosaic-loader > .cell:nth-child(16) {
--cell-color: #911750;
}
@keyframes ripple {
0% {
background-color: transparent;
}
30% {
background-color: var(--cell-color);
}
60% {
background-color: transparent;
}
100% {
background-color: transparent;
}
}
h2, label {
font-family: Lato;
display: block;
color: white;
font-weight: 100;
text-align: center;
}
#tata {
font-family: sans-serif;
border-collapse: collapse;
margin: 25px 0;
font-size: 1em;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
#tata td, #tata th {
border: 1px solid #ddd;
padding: 18px, 15px;
}
#tata tr:nth-child(even){background-color: #e8daef;}
#tata tr:nth-child(odd){background-color: #46a28b;}
#tata tr:hover {background-color: #a9bbc9;}
我想让预加载器在3秒后消失有人能帮忙吗?
document.getElementsByClassName('hi mosaic-loader');是错误的
你正在检查一个元素有两个类在同一时间，而你共享的标记有一个元素与类hi和一个与类mosaic-loader
检查https://codepen.io/napolux/pen/QWBgoZK?editors=1111
修改相应的标记