前端随笔
2024-03-28 更新
「记录一些可爱或可癌的代码」
Javascript
两个对象间变量值的追加和覆盖
1
2
3
4
5
6
7
8
9
10
11
12
13
| const foo = { a: 1, b: 2 }
const bar = { b: 3, c: 4}
Object.keys(bar).forEach(key => {
foo[key] = bar[key]
})
const foo2 = {...foo, ...bar}
console.log(foo)
console.log(foo2)
|
1
2
3
4
5
6
7
8
9
| const foo = { a: 1, b: 2 }
const bar = { b: 3, c: 4}
Object.keys(foo).forEach(key => {
if (!(key in bar)) return
foo[key] = bar[key]
})
console.log(foo)
|
CSS
滚动字幕
给需要滚动的字幕设置display: inline-block;这样就可以通过100%相对量拿到文本的相对宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <template>
<div class="container">
<p class="scrolling-text">滚动字幕~~滚动字~~滚动~~滚！！！</p>
</div>
</template>
<style>
.container {
width: 300px;
overflow: hidden;
}
.scrolling-text {
+ display: inline-block;
white-space: nowrap;
animation: scroll-h 10s linear infinite;
}
@keyframes scroll-h {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% + 300px));
}
}
</style>
|
👋;
前端, 技术分享, 随笔 — 2024年3月28日