javascript - 使卡片样式引用 javascript 出现问题-6ren

javascript - 使卡片样式引用 javascript 出现问题

转载作者：行者123 更新时间：2023-11-28 02:44:51

26

4

我在为数组设置样式时遇到了麻烦，

这是我的代码:

这是我的 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 不起作用，我实际上也会很高兴，因为我知道该怎么做。

最佳答案

您需要删除空格:

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

应该是:

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

关于javascript - 使卡片样式引用 javascript 出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46974509/

26

4

0

文章推荐： javascript - Jquery:在html页面中更改类时的平滑过渡效果

文章推荐： javascript - 菜单随鼠标滑动

文章推荐： html - CSS 行高属性问题

c++ - 将函数作为参数传递的良好做法 : copy, 引用，const 引用？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: template pass by value or const reference or…? 以下对于将函数
C++ 重载运算符两次，一次返回非 const 引用，另一次返回 const 引用，偏好是什么？
我用相同的参数列表重载了一个运算符两次。但返回类型不同: T& operator()(par_list){blablabla} const T& operator()(par_list){bla
java - 如果 ViewModel 持有此 Activity 实现的接口(interface)引用，GC 是否会收集 Activity 引用？
假设我有实现接口(interface) I 的 Activity A。我的 ViewModel 类 (VM) 持有对实现接口(interface) I 的对象的引用: class A extends
PHP 引用 `$this`
PHP 如何解释 &$this ？为什么允许？我遇到了以下问题，这看起来像是 PHP 7.1 和 7.2 中的错误。它与 &$this 引用和跨命名空间调用以及 call_user_func_arr
引用 Php
谁能解释一下下面“&”的作用: class TEST { } $abc =& new TEST(); 我知道这是引用。但是有人可以说明我为什么以及什么时候需要这样的东西吗？或者给我指向一个对此有很好解
详解C++ 引用
引用变量是一个别名，也就是说，它是某个已存在变量的另一个名字。一旦把引用初始化为某个变量，就可以使用该引用名称或变量名称来指向变量。 C++ 引用 vs 指针引用很容易与指针混淆，它们之间有三
解析C++引用
目录引言背景结论引言我选择写C++中的引用是因为我感觉大多数人误解了引用。而我之所以有这个感受是因为我主持过很多C++的面试，并且我很少
16、Perl 引用
Perl 中的引用是指一个标量类型可以指向变量、数组、哈希表（也叫关联数组）甚至函数，可以应用在程序的任何地方创建引用定义变量的时候，在变量名前面加个 \，就得到了这个变量的一个引用 $sc
Perl，通过调用其父程序覆盖子程序 |引用
我编写了一个将从主脚本加载的 Perl 模块。该模块使用在主脚本中定义的子程序(我不是维护者)。对于主脚本中的一个子例程，需要扩展，但我不想修补主脚本。相反，我想覆盖我的模块中的函数并保存对原始子例
F# 引用 - 遍历由值表示的函数调用
我花了几个小时试图掌握 F# Quotations，但我遇到了一些障碍。我的要求是从可区分的联合类型中取出简单的函数(只是整数、+、-、/、*)并生成一个表达式树，最终将用于生成 C 代码。我知道使用
regex - 引用 - 密码验证
很多时候，问题(尤其是那些标记为 regex 的问题)询问验证密码的方法。似乎用户通常会寻求密码验证方法，包括确保密码包含特定字符、匹配特定模式和/或遵守最少字符数。这篇文章旨在帮助用户找到合适的密码
excel - 引用公式中的单元格地址/引用
我想通过 MIN 函数内的地址(例如，C800)引用包含文本的最后一个单元格。你能帮忙吗？ Sub Set_Formula() ' ----------------------------- Dim
for-of 循环中的 Javascript 引用
使用常规的 for 循环，我可以做类似的事情: for (let i = 0; i < objects.length; i++) { delete objects[i]; } 常规的 for-
cucumber :引用/不引用参数的最佳实践是什么
在 Cucumber 中，您定义了定义 BDD 语法的步骤；例如，您的测试可能有: When I navigate to step 3 然后你可以定义一个步骤: When /^I navigate t
linq - 表达式类型.引用
这是什么UnaryExpression的目的，以及应该怎样使用？最佳答案它需要一个 Expression对象并用另一个 Expression 包裹它.例如，如果您有一个用于 lambda 的表达式
JQuery 多个选择器，$(this) 引用？
给出以下内容 $("#identifier div:first, #idetifier2").fadeOut(300,function() { // I need to reference jus
xslt - XPath 引用
我不知道我要找的东西的正确术语，但我要找的是一个完整的引用，可以放在双引号之间的语句，比如 *， node()、@* 以及所有列出的 here加上任何其他存在的。我链接到的答案提供了一些细节，但还
regex - 引用-此正则表达式是什么意思？
This question's answers are a community effort。编辑现有答案以改善此职位。它当前不接受新的答案或互动。这是什么？这是常见问答的集合。这也是一个社区Wi
accessibility - Microsoft的UI自动化的教程/引用
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想改善这个问题吗？更新问题，以便将其作为on-topic
rust - 引用“静态生命周期不长？
考虑下一个代码: fn get_ref(slice: &'a Vec, f: fn(&'a Vec) -> R) -> R where R: 'a, { f(slice) } fn m

首页

博学

6Ren·AI

商城

javascript - 使卡片样式引用 javascript 出现问题