Record P1 tech summary, 26Sep ~2 Oct 2022 This is to
css part
position:absolute cannot use BFC.
- use js to check the height of ‘tallest’ element and get the height to container(position absolute).
- BFC 只能清除 float 造成的浮动, 也会造成塌陷,无法用 BFC, 只能用 js 计算 container 的高度,然后手动赋值.
bootstrap 缩写
- mb-0: margin-bottom=0;
- px-1: padding(left & right)
- py-1: padding(top & bottom)
- bg-dark:set background to dark
- btn:create a btn
get linear_gradient color on text 文字做彩色 linear
1
2
3
4
5
6
#modal__sample span {
color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-image: linear-gradient(90deg, #6c757d, #f9ecf1);
}
- set background color
- set text color transparent
- set clip so that color see through to text.
object-fit:cover prevent image become blurry
- object-fit:contain also keeps the aspect ratio,but resize to fit all in
- object-fit:scale-down 会选择 contain/none 中比较小的那个.
use prettier ignore
add
<!-- prettier-ignore -->to the end of line to trigger
use media query
1
2
3
4
5
@media (max-width: 991.98px) {
.hero-1 {
padding: 110px 0 0px;
}
}
JS part
write a modal with bootstrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div
class="modal fade"
id="modal__trump__story"
tabindex="-1"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center p-4">
<p class="text-muted ">
put your text here 没有人比我更懂病毒,消毒水,好使,杀死99的病毒
</p>
</div>
</div>
</div>
</div>
toggle a modal upon page loaded
在页面加载时候,触发一个弹窗
1
2
const myModal = new bootstrap.Modal(document.getElementById("onload_modal"));
myModal.toggle();
通过 toggle 触发的 modal,是完整的.(better practice)
或者可以把 modal 的 display 变成 inline,同样可以实现类似功能. see below example 👇🏻
1
2
3
4
5
6
7
const myModal = document.querySelector("#onload_modal");
myModal.style.display = "inline";
// optionally, 可以加一个点击任意地方关闭modal的指令, 这个方法比较笨;
document.documentElement.addEventListener("click", () => {
myModal.style.display = "none";
});
// not that good practice
get element width &/ height
1
2
const width = divContainer.offsetWidth;
const height = divContainer.offsetHeight;
or use element.getBoundingClientRect()
使用 element.getBoundingClientRect()可以得到 element 的宽高,top,bottom,left,right 如下 👇🏻
get viewport dimension
1
2
const height = window.innerHeight || document.documentElement.clientHeight;
const width = window.innerWidth || document.documentElement.clientWidth;
check if is in viewport
1
2
3
4
5
6
const offset = { left: 0, right: 0, top: 0.1 * height, bottom: 0 };
const isInViewPort =
rect.top >= -offset.top &&
rect.left >= -offset.left &&
rect.bottom <= height + offset.bottom &&
rect.right <= width + offset.right;
import font awesome
1
2
3
4
5
6
<script
defer
src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc"
crossorigin="anonymous"
/>
mobile phone touch event
on touch end, continue slider moving
1
2
3
banners.addEventListener("touchend", () => {
moveSliderByTimer();
});
promise 必考
- promise 来之前,async 的弊端.
- 单线程 single thread,异步 async
1
2
3
4
5
6
const request = new XMLHttpRequest();
request.open('Get',url),
request.send();
request.addEventListener('load',function(){
const data = JSON.parse();
})
- Ajax 数据返回有快慢,先返回先 render.
- call back hell, 回调里面有回调
- fetch(url).then(data=>console.log(data.jason()))
fetch return a promise. (promise obj is a container for future result)
trigger a rerender on function component
- state change
- props change
- father component render