返回后,什么都不应该起作用,因为我们正在退出该函数,但由于某种原因我们可以声明 一个函数。这与函数声明类型的冒泡函数有关吗?如果是的话,我们不应该先声明这个函数,然后重写为10吗?
let x = 3;
function fn() {
x = 10;
return;
function x() {
}
}
fn()
console.log(x); // 3
返回后,什么都不应该起作用,因为我们正在退出该函数,但由于某种原因我们可以声明 一个函数。这与函数声明类型的冒泡函数有关吗?如果是的话,我们不应该先声明这个函数,然后重写为10吗?
let x = 3;
function fn() {
x = 10;
return;
function x() {
}
}
fn()
console.log(x); // 3
我有一个带有表单和单独按钮(进一步closeButton)的模式窗口。当模式窗口打开时,我在closeButton上挂起一个事件,该事件关闭模式窗口。窗口关闭后,我希望从按钮中删除该事件。如果您只是打开和关闭模式窗口,则closeButton的事件将被删除,但如果您提交表单,则事件将累积在closeButton上。为什么事件在一种情况下会累积,但在另一种情况下,行为正是我所期望的:添加一个事件,关闭后将其删除。表单按钮调用与closeButton相同的函数,但由于某种原因,该事件没有从closeButton中删除。
const button = document.querySelector('.btn');
const container = document.querySelector(".container");
button.addEventListener('click', () => {
container.style.display = "block"
const closeButton = container.querySelector(".container__close");
closeButton.addEventListener("click", close(container))
})
const form = container.querySelector("#form");
form.addEventListener('submit', close(container))
function close(elem) {
const closeButton = elem.querySelector(".container__close");
return function func (evt) {
evt.preventDefault();
elem.style.display = 'none';
closeButton.removeEventListener('click', func);
}
}
.btn {
margin-block-end: 15px;
}
.container {
display: none;
inline-size: 500px;
padding: 15px;
border: 5px black solid;
}
.container__close {
inline-size: 100px;
margin-block-end: 15px;
}
<button class="btn">Click</button>
<div class="container" >
<button type="button" class="container__close">X</button>
<form id="form">
<input type="text" placeholder="Имя" required>
<input type="text" name="description" placeholder="Фамилия" >
<button type="submit" class="button">Сохранить</button>
</form>
</div>
大家好。一行中最多可以有三列,然后在添加新列表项时,它会移动到新行,在这种情况下,该元素将必须占据该行的整个可用宽度,并且如果有两个新元素,然后它们将宽度分开。有点像为元素设置flex: 1 0 315px。
* {
box-sizing: border-box;
}
.content {
display: grid;
width: 1024px;
grid-template-columns: 315px 1fr;
gap: 20px;
}
.content__list {
grid-row: 2;
grid-column: 1 / -1;
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
}
<div class="content">
<h2 class="content__title">TITLE</h2>
<ul class="content__list">
<li class="content__list-item">
<h3 class="content__list-title">
Lorem
</h3>
<p class="content__list-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
</p>
</li>
<li class="content__list-item">
<h3 class="content__list-title">
Lorem
</h3>
<p class="content__list-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
</p>
</li>
<li class="content__list-item">
<h3 class="content__list-title">
Lorem
</h3>
<p class="content__list-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
</p>
</li>
<li class="content__list-item">
<h3 class="content__list-title">
Lorem
</h3>
<p class="content__list-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
</p>
</li>
</ul>
</div>
我对一个公式感兴趣,如果父块的宽度小于我们设置的子块的宽度,则该公式可以计算哪个块应占用父块内的多少空间。
为什么MAIN块的宽度为423px,而ASIDE块的宽度为375px。如果父类减去100px,那么MAIN的宽度已经是393px,ASIDE的宽度是305px。您如何计算块的宽度?
/* Ширина parent 800px */
* {
box-sizing: border-box;
}
body {
width: 1000px;
border: 1px solid red;
height: 600px;
padding: 50px;
}
.parent {
width: 800px;
margin: 0 auto;
border: 1px solid green;
height: 100%;
display: flex;
align-items: start;
}
.aside-block {
width: min(50%, 450px);
border: 1px solid blue;
}
.main-block {
width: max(50%, 450px);
border: 1px solid black;
}
<div class="parent">
<div class="aside-block">ASIDE</div>
<div class="main-block">MAIN</div>
<div>
/* Ширина parent 700px */
* {
box-sizing: border-box;
}
body {
width: 1000px;
border: 1px solid red;
height: 600px;
padding: 50px;
}
.parent {
width: 700px;
margin: 0 auto;
border: 1px solid green;
height: 100%;
display: flex;
align-items: start;
}
.aside-block {
width: min(50%, 450px);
border: 1px solid blue;
}
.main-block {
width: max(50%, 450px);
border: 1px solid black;
}
<div class="parent">
<div class="aside-block">ASIDE</div>
<div class="main-block">MAIN</div>
<div>
为什么toFixed方法根据整数的不同对小数部分进行不同的舍入?
let num1 = 5.145;
let num2 = 3.145;
console.log(num1.toFixed(2));
console.log(num2.toFixed(2));
这两种方法有什么区别吗?更新并保存
// 1
const jane = await User.findOne({ {where: {name: 'Jane' }});
await jane.update({ favoriteColor: 'blue' });
// 2
const jane = await User.findOne({ {where: {name: 'Jane' }});
jane.favoriteColor = "blue"
await jane.save();
大家好。
有必要用.list列表的两列制作两个 div,以便它们共享彼此之间的空间,但是会出现一个问题,当.list第二个列表中的第一个 div 中没有足够的文本时,文本会飞得很远,但是它有必要像第二个 diva 中的列那样缩进.list。
在那里,由于文本的缘故,有更多,因此列表变得更接近第一个列表。
这可以以某种方式完成吗?
我想在不设置绝对值的情况下保持适应性。
ul li {list-style: none;}
.list {
max-width: 600px;
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="list">
<ul>
<li>Lorem ipsum dolor .<li>
<li>Lorem ipsum dolor<li>
<li>Lorem ipsum dolor.<li>
</ul>
<ul>
<li>Lorem .<li>
<li>Lorem ipsum<li>
<li>Lorem.<li>
</ul>
</div>
<div class="list">
<ul>
<li>Lorem ipsum dolor sit amet.<li>
<li>Lorem ipsum dolor sit amet.<li>
<li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
<li>Lorem .<li>
<li>Lorem ipsum<li>
<li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>
开始学习AJAX。问题是:为什么通过异步函数解码 ours 时response,我们得到一个对象 { id: 101 } - 它甚至从哪里读取?在处理过程中,.then我们会从链接中获得完整的对象数组吗?我期待异步函数也从引用返回一个对象数组,但它返回一个我不知道它来自哪里的对象。
fetch它应该在两种情况下都一样吗?await它只是等待函数完成fetch,仅此而已,它不添加任何内容。并且它本身返回一个 promise,在这两种情况下都fetch存储了对象的相同结果 。Response
处理方式.then:
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const result = fetch(POSTS_URL, {
method: 'GET',
})
result
.then(response => response.json())
.then(result => console.log(result));
通过异步函数:
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const createNewPost = async () => {
try {
isLoading = true;
const response = await fetch(POSTS_URL, {
method: 'POST',
})
if (!response.ok) {
throw new Error('Ошибка запроса');
}
const result = await response.json();
console.log('result', result);
} catch (error) {
console.log(error);
} finally {
isLoading = false;
}
};
createNewPost();
大家好!
我需要这样做,以便当您将鼠标悬停在图像上时,会在其上叠加一个透明的黑色胶片,上面会有一个标题和一个您可以单击的按钮。问题如下:我叠加了电影,有标题,但是光标:指针没有设置到按钮上,不知道怎么解决。
这是我的代码:https ://liveweave.com/WcO7K3
当您将鼠标悬停在图像上时,光标应出现在出现的白色方块上。
“我的投资组合”部分,有一个应该如何的例子。
大家好,我一直在练习布局,偶然发现了一个新问题,在标题附近的屏幕边缘出现一条线:
而且现在不知道怎么正确实现,通过border-bottom,或者下载,插入,或者需要线从屏幕大小缩放。