小编And*_*one的帖子
在JavaScript中使用什么而不是类？
背景
我是一名开发人员,拥有大约9年的Java和C#背景历史.
在那些语言中,类和分类分类以及对象范例固有.
因此,当ECMA6出来时,我很高兴看到语言课程......我开始在各处使用它们.
问题
事实证明,在JavaScript中使用类是一个陷阱.
你永远不会真正理解JavaScript.你会认为你这样做,但你没有.
问题
很明显,在看完这个完整的会议后,我意识到我不懂JavaScript.
我的生活中我已经使用OOP格式化了类范例,现在我甚至不知道在哪里寻求帮助,甚至不知道如何开始.
- 在JavaScript风格中,你将如何用继承代表动物王国？我会使用类Animal,然后使用Class Dog,并实例化狗的对象.这不是JavaScript方式.
非JavaScvript的一个例子:
class Animal{
constructor(aName){
this.name = aName;
}
}
class Dog extends Animal{
constructor(){
super(aName);
this.type = "Furry dog";
}
}
let myDog = new Dog("Boby");
- 这样做的JavaScript方式是什么？
在这一点上,我正在寻找指导.在尝试之后我找不到任何有用的东西,主要是因为我相信我迷失了以至于我甚至都没有找到正确的东西.
提前致谢.
8
推荐指数
推荐指数
1
解决办法
解决办法
1071
查看次数
查看次数
如何使用CSS在div中移动图像？
我有一个位于div内部的图像,我试图将其向下移动50 px并向下移动50 px以使所有内容都完整.但我不知道如何编辑CSS中的图像,因为我不知道将照片连接到css的代码.
我的代码:
#OverviewText4 img:MoneyIcon.png {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>谢谢你的帮助
7
推荐指数
推荐指数
2
解决办法
解决办法
5万
查看次数
查看次数
通过变换将曲面/拱形边添加到css3 3d对象
我正在开发一个只在3d空间中用CSS重新创建乒乓球棒的小项目,到目前为止这是结果http://codepen.io/IljaDaderko/pen/dpyZoL
正如您可能.pad已经注意到它没有侧面并且在某个点上,您可以看到闪烁,因为它变得透明.我一直试图找出如何为蝙蝠添加侧面,但它需要某种元素的弯曲,所以它四处走动,我不完全确定如何实现这一点.
码:
.wrapper {
text-align: center;
padding: 20px 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bat {
display: inline-block;
-webkit-animation: rotate 10s infinite;
animation: rotate 10s infinite;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.pad {
width: 200px;
height: 220px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.pad .front {
width: 100%;
height: 100%;
background-color: #CC0000;
border-radius: 60% 60% 45% 45%;
}
.pad .back {
width: 100%;
height: 100%;
background: #66C6CC;
-webkit-transform: translateY(-100%) translateZ(10px);
transform: translateY(-100%) translateZ(10px);
border-radius: 60% …5
推荐指数
推荐指数
1
解决办法
解决办法
133
查看次数
查看次数
::之后出现伪元素
我正试图在渐变的顶部和底部创建一个微妙的波.但是,:: after伪元素出现在主要内容之前而不是之后.目前它显示为:: before,:: after,主要内容,但我希望它显示为:: before,main content,:: after.
这是我的代码:
#gradient {
background: #0068a9;/* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
width: 100%;
height: 300px;
min-height: 0px;
display: block;
}
#gradient::before,
#gradient::after {
display: block;
content: "";
width: 100%;
height: 75px;
} …5
推荐指数
推荐指数
1
解决办法
解决办法
140
查看次数
查看次数
选择没有<a>的<li>
你好,
我想确保始终具有相同的填充<li>,但是当它是填充<a>(在大选择区域中)的链接时.
li a {
padding: 1rem;
}
li:not(a) {
padding: 1rem;
}<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul>- 我希望填充
<a>它存在的时间,而不是更多<li> - 并且当没有
<a>填充物时<li>
5
推荐指数
推荐指数
1
解决办法
解决办法
85
查看次数
查看次数
通过使用在每个子数组的第一个元素中找到的子字符串作为键来组合子数组
拥有这种形式的二维数组:
arr = [
["12325-a", 1, 1, 1],
["43858-b", 3, 4, 1],
["84329-a", 6, 5, 2],
["18767-b", 0, 9, 0],
["65888-b", 5, 4, 4],
];
在每个子数组上,第一个元素是一个字符串.
我想将具有相同结尾的子阵列组合在一起.在这种情况下,它将是两组: -a和-b.
应根据idex将数值计算为总和.
所以结果如下:
arr = [
["-a", 7, 6, 3],
["-b", 8, 17, 5],
];
我的解决方案(不起作用):
let arr = [
["12325-a", 1, 1, 1],
["43858-b", 3, 4, 1],
["84329-a", 6, 5, 2],
["18767-b", 0, 9, 0],
["65888-b", 5, 4, 4],
];
result = arr.reduce(function(acc, curr) {
if (acc[curr[0].substr(curr[0].length - 2)]) …5
推荐指数
推荐指数
1
解决办法
解决办法
44
查看次数
查看次数
使用下划线或lodash将一个JSON结构转换为另一个
我试图将当前的JSON结构转换为另一个结构时遇到问题
var data = [
{
"url": "asset/01.flv",
"pic": "asset/01.jpg"
},
{
"url": "asset/02.flv",
"pic": "asset/02.jpg"
},
{
"url": "asset/03.flv",
"pic": "asset/03.jpg"
},
{
"url": "asset/04.flv|asset/05.flv|asset/06.flv|asset/07.flv|asset/08.flv",
"pic": "asset/04.jpg|asset/05.jpg|asset/06.jpg|asset/07.jpg|asset/08.jpg"
},
{
"url": "asset/09.flv|asset/10.flv",
"pic": "asset/09.jpg|asset/10.jpg"
}
]
我想将数据转换为这样的输出结构.
这是我想要实现的结果的目标.
var data = [
{
"url": "asset/01.flv",
"pic": "asset/01.jpg"
},
{
"url": "asset/02.flv",
"pic": "asset/02.jpg"
},
{
"url": "asset/03.flv",
"pic": "asset/03.jpg"
},
{
"url": "asset/04.flv",
"pic": "asset/04.jpg"
},
{
"url": "asset/05.flv",
"pic": "asset/05.jpg"
},
{
"url": "asset/06.flv",
"pic": "asset/06.jpg"
},
{
"url": …5
推荐指数
推荐指数
1
解决办法
解决办法
132
查看次数
查看次数
按下按钮时,如何使此红绿灯序列重复多次？
document.getElementById('AllButton').onclick = switchAll;
function illuminateRed() {
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
}
function illuminateOrange() {
clearLights();
document.getElementById('slowLight').style.backgroundColor = "orange";
}
function illuminateGreen() {
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";
}
function illuminateRedOrange() {
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
document.getElementById('slowLight').style.backgroundColor = "orange";
}
function illuminateBlack() {
clearLights();
}
function clearLights() {
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";
}
var clickTimes = 0;
var change = 1;
function switchAll() {
clickTimes++;
switch (clickTimes) {
case 1:
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
break;
case 2: …4
推荐指数
推荐指数
1
解决办法
解决办法
200
查看次数
查看次数
如何在 HTML 和 CSS 中将文本放置在图像上方
我有一个无法找到答案或不知道如何搜索答案的问题。
我不知道如何以我希望它们对齐的方式将文本放置在图像上方。下图将澄清我的要求。
接下来是我的 HTML 和 CSS 代码，我只提供了关于页面的 HTML，但 CSS 是针对整个网站的。这不是什么专业的事情，我只是想边做边学。我的想法是使用这些图像作为链接（我知道该怎么做）。如果已经有人问过类似的问题，我很抱歉，我尝试在此处和 YouTube 上搜索，但找不到此问题的解决方案。如果不出意外的话，我会在 GIMP 中编辑带有文本的图片。
body {
background: #e5fcf4;
font-family: Arial;
}
header {
text-align: center;
}
header nav {
display: inline-block;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
float: left;
color: white;
width: 200px;
height: 40px;
background-color: #0d3801;
opacity: .9;
line-height: 40px;
text-align: center;
font-size: 20px;
}
header ul li a {
text-decoration: none;
color: white;
display: block;
}
header ul …4
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
如何在 div - CSS 中添加底部曲线？
以下是我的代码，其中我无法创建底部曲线，但增加 border-top-left-radius/border-top-right-radius 无法创建如图所示的凹凸。让我知道如何仅使用 CSS 处理此问题。
代码：
.container {
position: relative;
}
.rect {
width: 334.5px;
height: 223px;
background: #34EFEE;
text-align: center;
line-height: 223px;
}
.rect:after {
content: '';
position: absolute;
bottom: 0px;
width: 334.5px;
height: 15px;
background: #FFFFFF;
left: 0;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}<div class="container">
<div class="rect">
<h3>334.5 X 223</h3>
</div>
</div>预期输出 -
PLNKR —— http: //plnkr.co/edit/7oTCHyn8PFABri0KHSrH?p=preview
3
推荐指数
推荐指数
1
解决办法
解决办法
1774
查看次数
查看次数
标签 统计
html ×7
css ×6
javascript ×4
arrays ×1
css-position ×1
css3 ×1
ecmascript-6 ×1
html5 ×1
image ×1
lodash ×1
transform ×1