JS30-Day2 & Day3 & Day4 练习重点整理

此为课程 JavaScript30 所做的练习纪录，以下为课程网站:
https://javascript30.com/

Day2-CSS + JS Clock

这次的练习是实作一个小时钟

1. CSS 属性

transform-origin(0, 0); /* 从物件的左上角开始 */

transform: 设定物件的变形种类
常用包括translate(位移)、scale(缩放)、rotate(旋转)、skew(倾斜)等，还有结合 scale、skew、translate 的 matrix(scale X, scale Y, skew X, skew Y, move X, move Y)

transition-timing-function: 设定物件不同变形期间的变形速度

transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

Day3-Scoped CSS Variables and JS

练习使用 CSS 的变数及用 JS 控制变数值的变化

1. 使用 CSS 变数

範例:

:root {  --base: #ffc600;  --spacing: 10px;  --blur: 10px;}img {  padding: var(--spacing);  background-color: var(--base);  filter: blur(var(--blur));}

2. 使用 JS 改变 CSS 变数值

document.documentElement.style.setProperty('--<varName>', '<varValue>')

Day4-Array Cardio 1

介绍了几个阵列的操作练习题目
由于大部分的练习都做的出来，所以只针对没解出来的一题做纪录:

第 8 题:

原本以为 reduce 的第一个参数只能设定数字的累加值，没想到里面还能放空物件，这是自己以前没注意到的细节

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];// 设定第一个参数为空物件const instancesNum = data.reduce((obj, item) => {  // 若 obj 物件没有 item 属性(item 为 data 内的各元素)，就增加该属性，并设定值为 0  if(!obj[item]) {    obj[item] = 0;  }  // 再次碰到该属性的话，值+1  obj[item]++;  return obj;}, {})console.log(instancesNum);

印出的结果:

全部练习的程式码都在此连结:
https://github.com/a90100/JavaScript30