Javascript is required

May 8, 2019

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

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

1. 高雄旅遊資訊

連結

Demo

Code

使用語言

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計算

連結

Demo

Code

使用語言

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
cd ..