小编Hao*_* Wu的帖子
如何制作具有方格图案的响应式网格？
我有一个响应式网格布局。根据窗口宽度，可以有任意数量的列。
我试图使网格具有方格图案，所以我使用odd和even选择器为网格单元着色。
但是它仅在列数为奇数时有效。当列数为偶数时，它将变为条纹图案。
是否有CSS属性/选择器来解决此问题，或者有更好的方法来解决此问题？
这是我的项目中显示问题的简化代码：
.grid {
display: grid;
counter-reset: spans;
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.grid > * {
counter-increment: spans;
text-align: center;
padding: 10px 0;
color: #fff;
}
.grid > *::after {
content: counter(spans);
}
/* Coloring */
.grid > *:nth-child(odd) {
background-color: #789;
}
.grid > *:not(:nth-child(odd)) {
background-color: #567;
}<h2>Works when columns are odd</h2>
<div class="grid" style="--cols: 5;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span> …推荐指数
解决办法
查看次数
如何将 calc() 与 min-content 一起使用？
我有一个网格布局，可以像这样简化。
我想要实现的是.side默认使用内容需要的任何空间min-content，但用户可以通过增加来放大它--size自定义 css 属性来放大它。
我尝试过calc(min-content + var(--size))，但没有成功。我无法指定特定值，calc(100px + var(--size))因为原始大小应由其内容决定。
实现此类功能的最佳方法是什么？
* {
box-sizing: border-box;
}
body {
overflow: hidden;
margin: 0;
}
.container {
--size: 10px;
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"l t"
"l b";
/* doesn't work */
/* grid-template-columns: calc(min-content + var(--size)) 1fr; */
grid-template-columns: min-content 1fr;
grid-template-rows: 1fr 1fr;
}
.container > * {
border: solid 1px black;
}
.side {
grid-area: l;
}
.top …推荐指数
解决办法
查看次数
正则表达式来测试某个单词是否恰好出现了 2 次
给定一个字符串，测试一个单词是否恰好出现了两次
| 输入 | 经过 |
|---|---|
apple banana pineapple |
不 |
apple banana apple pineapple |
是的 |
apple banana banana pineapple |
是的 |
apple banana apple pineapple apple |
不 |
apple banana apple banana |
是的 |
apple banana banana apple pineapple apple |
是的 |
我试过这样的事情，但没有奏效:(
^.*(\b\w+\b)(?:(?!\b\1\b).)*\b\1\b(?:(?!\b\1\b).)*$
有什么建议？我正在使用 pcre。
推荐指数
解决办法
查看次数
如何在弹性布局中混合宽度和百分比（左/右）？
我有 3 个块，我需要：
- 第一个块需要 200 像素宽并接触左侧。
- 第二个块位于第一个块之后，其右边缘恰好位于其容器宽度的 50% 处
- 第三个块将接管剩余的空间。
我在一些游戏引擎中做了类似的东西：
但是如何用css来实现呢？
我不想嵌套内部 div，因为它们扮演着相同的角色。
我尝试了这个但不起作用:(
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
display: flex;
position: relative;
}
.wrapper > * {
height: 300px;
display block;
}
.wrapper > *:nth-child(1) {
background-color: salmon;
width: 200px;
}
.wrapper > *:nth-child(2) {
background-color: khaki;
right: 50%;
}
.wrapper > *:nth-child(3) {
background-color: violet;
width: 50%;
}<div class="wrapper">
<pre>
left: 0;
width: 200px;
</pre>
<pre>
left: 200px;
right: 50%;
</pre>
<pre> …推荐指数
解决办法
查看次数
查找包含增加的 1 的子字符串
我有一个仅由0and 组成的字符串1，我需要找到一个以 one 开头1并以另一个1s级联结尾的子字符串，1连续的每个匹配都1增加一个。
例如，0101101011101将捕获1 0 11 010 111。
我试过
(?:(1(?(1)\1)).*?)+
但它不起作用。
| 输入 | 团体 | 输出 |
|---|---|---|
01 |
0[(1)] |
1 |
1001111 |
[(1)00(11)]11 |
10011 |
010011111 |
0[(1)00(11)(111)] |
10011111 |
0100111110001110 |
0[(1)00(11)(111)]0001110 |
10011111 |
0100111011001110 |
0[(1)00(11)101100(111)]0 |
10011101100111 |
0100111110011110 |
0[(1)00(11)(111)00(1111)]0 |
10011111001111 |
推荐指数
解决办法
查看次数
为什么重新分配参数不适用于具有默认值的参数？
我有一个非常奇怪的问题，我不知道它是如何发生的。
当我用arguments[0] = 42. 在arguments[0]和第一个参数a都是42。这是预期的。
function foo(a, b, c) {
arguments[0] = 42;
console.log(a, arguments[0]);
}
foo(1, 2, 3);但是当我尝试使用具有默认值的参数的函数时，第一个值a不再被重新分配。有人可以解释这种差异吗？
function foo(a, b, c = 3) {
arguments[0] = 42;
console.log(a, arguments[0]);
}
foo(1, 2, 3);推荐指数
解决办法
查看次数
有没有办法获得具有相同名称的外部作用域变量？
如果我在外部闭包中定义了某个变量，而在内部闭包中定义了另一个同名的变量。我能以某种方式获得外部变量吗？
我知道它仍然在内存中的某个地方并且没有被覆盖，因为它可以在函数之后打印。有没有办法访问它？
const foo = 'outer';
function bar() {
const foo = 'inner';
// Is there a way to get the outside foo from here?
console.log(foo); // "inner", but I want it to be "outer"
}
bar();
console.log(foo); // "outer"推荐指数
解决办法
查看次数
如何使用 Express 从 url 发送图像数据？
我希望我的/image应用程序返回随机图像，我该怎么做？
应用程序.js：
const app = express();
app.get('/image', async (req, res) => {
const url = 'https://example.com/images/test.jpg';
res.send(/**/); // How do I send the image binary data from the url?
});
索引.html
在HTML中，这张图片实际上显示的是图片的内容https://example.com/images/test.jpg
<img src="https://my-app.com/image" />
推荐指数
解决办法
查看次数
如何将 svg 动画重置为其初始状态？
我有一个与此类似的 SVG 动画：
function startAnimation() {
document.querySelector('#anim-width').beginElement();
}<svg width="100" viewBox="0 0 100 100">
<rect id="box" x="10" y="10" fill="red" width="10" height="10">
<animate
id="anim-width"
attributeName="width"
from="10"
to="80"
dur="1s"
fill="freeze"
begin="click"
/>
<animate
attributeName="height"
from="10"
to="80"
begin="anim-width.end + 0s"
dur="1s"
fill="freeze"
/>
</rect>
</svg>
<br/>
<button onclick="startAnimation()">Start</button>我想要实现的是红色框从10乘10开始，当单击按钮时，宽度从10扩展到80，然后在宽度动画完成后高度扩展到80。
第一次播放效果很好，但是当再次单击按钮时，高度从 80 开始，而不是 10，如何将所有内容重置为其初始状态并重播整个动画？
我尝试添加document.querySelector('#box').setAttribute('height', '10');该startAnimation()功能，但似乎不起作用。
推荐指数
解决办法
查看次数
javascript数字属性名称如何工作？
有人可以解释这种行为吗？
const obj = {};
obj[0] = 0;
console.log(obj['0']); // 0
obj[0.1] = 0.1;
console.log(obj['0.1']); // 0.1
obj[1.0] = 1.0;
console.log(obj['1.0']); // undefined似乎javascript将字符串整数转换为整数，但不完全是它在计算中的工作方式。由于string '1.0'应该与相同1。
也可以为一个数字0和字符串对象设置2个不同的属性"0"吗？可以在执行对象查找时避免javascript将字符串转换为数字吗？
推荐指数
解决办法
查看次数
使用 javascript 使用正则表达式环视拆分字符串
String.prototype.split如果前一个字符不等于下一个字符，我想用来拆分字符串，这是目标结果：
'abcd' => ['a', 'b', 'c', 'd']
'aaabbbccd' => ['aaa', 'bbb', 'cc', 'd']
我知道可以仅通过以下方式拆分字符串lookbacks：
const result = 'aaabbbccd'.split(/(?<=a)/);
console.log(result); // ["a", "a", "a", "bbbccd"]所以我想找到一个表达式来找到它的回溯不等于向前看的两个字符的分隔符。
但我试过这个，它不起作用：
const result = 'aaabbcccd'.split(/(?<!\2)(?=.)/);
console.log(result); // ['a', 'a', 'a', 'b', 'b', 'c', 'c', 'c', 'd']那么是否有正则表达式来实现这一目标？或者用正则表达式根本不可能做到这一点？
推荐指数
解决办法
查看次数
除了@click，我如何使用 v-on="$listeners"？
我有一个Button.vue这样的。我正在使用v-on="$listeners"将所有侦听器传递给<a>.
<template>
<a
v-bind="$attrs"
v-on="$listeners"
class="Button"
href="javascript: void(0)"
:class="{ disabled }"
@click="onClick()"
>
<slot></slot>
</a>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
}
},
methods: {
onClick() {
if (!this.disabled) {
this.$emit('click');
}
}
},
};
</script>
但是在传播@click事件之前我需要进行自定义检查，因此我还定义了@click. 但是，当我同时定义v-on="$listeners"并@click="onClick()"在同一时间，该onClickDelete函数被调用两次。我也试过了@click.prevent，还是不行。
<Button @click="onClickDelete">Delete</Button>
有没有一种方法可以v-on="$listeners"为除 之外的所有事件定义@click？
这是代码沙箱。
推荐指数
解决办法
查看次数
尝试使用 HTML & CSS & JS 制作灯泡
<!DOCTYPE html>
<html lang="en">
<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>3 Circle</title>
<style>
body {background: black;}
.container {display: flex;}
.circle {
width: 500px;
height: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
background: white;
}
.active {
background: yellow !important;
color: red;
}
</style>
</head>
<body>
<section class="container">
<button class="circle circle1">Circle1</button>
<button class="circle circle2">Circle2</button>
<button class="circle circle3">Circle3</button>
</section>
<script>
let cir1 = document.querySelector('.circle1')
let cir2 = document.querySelector('.circle2')
let cir3 = document.querySelector('.circle3')
let allCircle = document.querySelectorAll('.circle');
cir1.addEventListener('onClick', onButton1Click); …推荐指数
解决办法
查看次数
标签 统计
javascript ×8
html ×5
css ×4
regex ×3
pcre ×2
css-grid ×1
express ×1
flexbox ×1
grid-layout ×1
node.js ×1
php ×1
responsive ×1
scope ×1
svg ×1
svg-animate ×1
vue.js ×1
vuejs2 ×1