im在HTML文件中尝试一个函数,它应该可以工作。我在Codepen中尝试过,但当我尝试添加时,它不起作用此外,我对JavaScript的了解非常少,所以也许我的错误真的很愚蠢。我还尝试添加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
在我的脚本之上,但这并没有改变任何东西,也许我选错了库?
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<!-- The team bars -->
<div class=teams-main-container>
<a href="C:UsersVincentDesktopWebsiteN1team-page.html"</a><div class=team-bar-1>
<img src='C:UsersVincentDesktopWebsiteImagesEUROPE.png' width="35px" height="20px" class=E_U>
<h1 id=team-name>Les papillons verts</h1>
<h1 id=number-of-players>0/3</h1>
</div>
</div>
这是CSS:
body {
display:grid;
font-family:'Source Sans Pro', sans-serif;
background: #2a2d38;
}
.body_class_for_apex_game_page {
grid-template-rows: 50px 0.5fr 2fr ;
grid-template-columns: 0.5fr 2fr 0.5fr;
}
/* First team prototype */
.team-bar-1{
border-radius: 2px;
cursor:pointer;
height: min(15vw, 100px);
width: 100%;
display:flex;
justify-content: flex-start;
flex-direction: row;
margin-top:10px;
background-color: #2a2d38;
transition: 0.1s ease-in-out all;
border:solid #444444 2px;
}
.team-bar-1:hover{
border-color: #6e6e6e;
}
a{
text-decoration: none;
}
.E_U {
margin-top:auto;
margin-bottom:auto;
width:min(4vw, 35px);
height:min(3vw, 20px);
text-decoration: none;
margin-left:1%;
}
#team-name{
margin-top:auto;
margin-bottom:auto;
margin-left:1%;
color:white;
font-size: min(5vw, 35px);
text-align: center;
font-weight: bold;
text-decoration: none;
}
#number-of-players{
margin-top:auto;
margin-bottom:auto;
margin-left:auto;
color:white;
font-size: min(5vw, 35px);
align-self: flex-end;
font-weight: bold;
text-decoration: none;
padding-right: 1%;
}
以及我的功能:
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
multiplyNode(document.querySelector('.team-bar-1'), 15, true);
您似乎忘记了将js文件包含到html中。使用一些<script src="...">
魔法。