May 8, 2019
【JavaScript】JavaScript 入門篇-學徒的試煉-最終作業

1. 高雄旅遊資訊
連結
使用語言
HTML、CSS、JavaScript
技巧
從陣列篩選出不重複的值
function addToList() {
  let str = ''
  const zone = []
  str += '<option>--請選擇行政區--</option>'
  for (let i = 0; i < data.length; i++) {
    // 如果 在zone裡面找到data[i].Zone他會回傳位置找不到的話會回傳-1
    // 當它回傳-1的時候就把目前這個zone裡面沒有的區域加進去
    if (!zone.includes(data[i].Zone)) {
      zone.push(data[i].Zone)
      str += `<option>${data[i].Zone}</option>`
    }
  }
  selectArea.innerHTML = str
}
花費時間
約4小時,JS大概40分鐘寫完,由於沒有認真學過CSS排版搞好久…
2. BMI計算
連結
使用語言
HTML、CSS、JavaScript
技巧
取得目前日期
const today = new Date()
const date = `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`
筆記
BMI算法
const bmi = Math.round((kg / ((cm / 100) * (cm / 100))) * 100) / 100
技巧
使用:hover與::befor做出刪除動畫
參考資料:https://codepen.io/bunny06/pen/KYMwVo
.card{
  width: 624px;
  height: 62px;
  background: #FFFFFF;
  line-height: 62px;
  margin: 16px auto 0px auto;
  vertical-align: middle;
  text-align: center;
  border-left: 7px solid;
  box-sizing: content-box;
  position: relative;
}
.card::before{
  content: "移除";
  display: block;
  position: absolute;
  top: 0;
  left: -7px;
  width: calc(100% + 7px);
  height: 100%;
  color: #fff;
  background-color: #424242;
  text-align: center;
  /*透明度預設為0=透明*/
  opacity: 0;
  /*漸入動畫效果*/
  transition: all 0.2s;
}
/*當滑鼠移入*/
.card:hover::before{
  /*調整為0.9半透明*/
  opacity: 0.9;
}
花費時間
約3小時,JS大概30分鐘寫完,一樣是CSS排版搞好久…
使用編輯器
Atom
Tags: