制作造型卡的麻烦参考javascript

时间：2017-10-27 11:59:40

标签： javascript html css

我为数组制作样式时遇到了麻烦，

这是我的代码：

这是我的HTML：

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="card.js"></script>
<script src="Deck.js"></script>
<link rel="stylesheet" href="card.css">
</head>
<body onload = "addCard()">
</body>
</html>

这是我的第一个带有数组（Deck）的JavaScript文件，它引用了我的第二个带有该卡的JavaScript文件：

var Deck = new Array();
function addCard(){
Deck[0] = new Card("test");
Deck[1] = new Card("1234");
}

这是我的第二张带有卡片的JavaScript文件：

class Card{
constructor(myText){
document.write("<div class = \"card\">");
document.write("<div class = \"back\">");
document.write("<div class = \"up\"><\/div>");
document.write("<div class=\"down\"><\/div>");
document.write("<hr class = \"arrowUpLeft\">");
document.write("<hr class = \"arrowDownRight\">");
document.write("<hr class = \"arrowUpRight\">");
document.write("<hr class = \"arrowDownLeft\">");
document.write("<div class = \"front\">");
document.write("<p id =\"text_card\">");
document.write(myText);
document.write("<\/p>");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/div>");
}
}

这是我的CSS：

.card{
    height: 336px;
    width: 240px;
    border: 4px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    bottom: 100%;
}

.card:hover > .back{
    animation: cardturn 1s;
    background-color: blue;
}

.card:hover>.back :not(.front), .card:hover>.back :not(.front)>*{
    animation: cardturn 1s;
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.card:hover>.back>.front, .card:hover>.back>.front>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.back{
    height: 328px;
    width: 232px;
    background-color: red;
    border-radius:46px;
    z-index: 2;
    border: 4px solid black;
    animation: cardturn2 1s;
}

.front, .front>*{
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.back>:not(.front), .back>:not(.front)>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.up{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    background-color: transparent;
}

.down{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    background-color: transparent;
}

.arrowUpLeft{
    position: relative;
    top: -22px;
    left:-25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowDownRight{
    position: relative;
    top: 118px;
    left:25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowUpRight{
    position: relative;
    top: 4px;
    left:-25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

.arrowDownLeft{
    position: relative;
    top: 44px;
    left:25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

@keyframes cardturn{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: red;
    }
    51%{
        background-color: blue;
    }
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

@keyframes cardturn2{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: blue;
    }
    51%{
        background-color: red;
    }
    100%{
        background-color: red;
    }
    0%{
        background-color: blue;
    }
}

@keyframes cardturn3{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
    }
}

@keyframes setvisibilityBackInvisible{
    0%,50%{
        visibility: visible;
    }
    51%,100%{
        visibility: hidden;
    }
}

@keyframes setvisibilityBackVisible{
    0%,50%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}

我希望你能帮助我们，我非常感谢你们。即使你只能解释为什么CSS不起作用可以解释我实际上会非常高兴，因为我知道该怎么做。

2 个答案:

答案 0 :(得分：0)

您需要删除空格：

"<div class = \"card\">"

应该是：

"<div class=\"card\">"

答案 1 :(得分：0)

您正在onload <body onload="addCard()">上触发您的功能。 我认为，当您使用document.write时，该文档已关闭，并会自动调用document.open clear the document。

有关详情，请查看this post。

也许您可以使用document.createElement创建一个元素，而不是使用document.write，然后添加您的HTML。

注意您正在复制ID <p id =\"text_card\"> 

class Card {
    constructor(myText) {
        var elm = document.createElement('div');
        elm.setAttribute('class', "card");

        var html = '<div class = "back">';
        html += '<div class = "up"></div>';
        html += '<div class="down"></div>';
        html += '<hr class = "arrowUpLeft">';
        html += '<hr class = "arrowDownRight">';
        html += '<hr class = "arrowUpRight">';
        html += '<hr class = "arrowDownLeft">';
        html += '<div class = "front">';
        html += '<p id ="text_card">';
        html += myText;
        html += "</p>";
        html += "</div>";
        html += "</div>";

        elm.innerHTML = html;
        document.body.appendChild(elm);
    }
}

var Deck = new Array();

function addCard() {
    Deck[0] = new Card("test");
    Deck[1] = new Card("1234");
}
.card{
    height: 336px;
    width: 240px;
    border: 4px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    bottom: 100%;
}

.card:hover > .back{
    animation: cardturn 1s;
    background-color: blue;
}

.card:hover>.back :not(.front), .card:hover>.back :not(.front)>*{
    animation: cardturn 1s;
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.card:hover>.back>.front, .card:hover>.back>.front>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.back{
    height: 328px;
    width: 232px;
    background-color: red;
    border-radius:46px;
    z-index: 2;
    border: 4px solid black;
    animation: cardturn2 1s;
}

.front, .front>*{
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.back>:not(.front), .back>:not(.front)>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.up{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    background-color: transparent;
}

.down{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    background-color: transparent;
}

.arrowUpLeft{
    position: relative;
    top: -22px;
    left:-25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowDownRight{
    position: relative;
    top: 118px;
    left:25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowUpRight{
    position: relative;
    top: 4px;
    left:-25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

.arrowDownLeft{
    position: relative;
    top: 44px;
    left:25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

@keyframes cardturn{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: red;
    }
    51%{
        background-color: blue;
    }
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

@keyframes cardturn2{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: blue;
    }
    51%{
        background-color: red;
    }
    100%{
        background-color: red;
    }
    0%{
        background-color: blue;
    }
}

@keyframes cardturn3{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
    }
}

@keyframes setvisibilityBackInvisible{
    0%,50%{
        visibility: visible;
    }
    51%,100%{
        visibility: hidden;
    }
}

@keyframes setvisibilityBackVisible{
    0%,50%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="card.js"></script>
<script src="Deck.js"></script>
<link rel="stylesheet" href="card.css">
</head>
<body onload = "addCard()">
</body>
</html>

相关问题
最新问题