iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

走入前端,才從0開始數,初學者歷程系列 第 21

day21-重溫Jquery學習日(二)

安安,今天是day21,剛過完連假的心情(´゚д゚`),延續昨天的筆記來跟著練習做一個習題,那話不多說就直接開始囉!如果看不懂的話也可以回顧一下昨日的筆記:P
文字有概略說明一下如何做的順序,但程式碼的註解比較詳細~所以建議看不懂的地方可以看一下註解:)


1.先建立ul#board,讓他來放置待會要設置的格子li。

ul#board

2.把格子建立出來,在js寫第一段程式碼建立7*7的格子,再回到css li撰寫樣式,設置完flex及height/border後會全部在同一行,但我們希望他能夠每行7格,所以在ul#board要使用flex-wrap使格子往下換行,會有個問題產生,只看見6個格子,是因為border本身也佔了寬度,所以要讓border的寬度也包含在本體寬度內,故在li加上box-sizing: border-box。

3.在html,body設置樣式,讓ul#board置中,撐滿整個網頁,接續去設定其他基本樣式。

//讓他置中,撐滿整個網頁
html,body
  width: 100%
  height: 100%
  display: flex
  background-color: #555
  justify-content: center
  align-items: center

ul#board
  width: 400px
  height: 400px
  display: flex
  // 讓原本一排的格子往下掉
  flex-wrap: wrap
  list-style: none
  padding: 0
  li
    flex: calc(100% / 7)
    height: calc(100% / 7)
    border: 1px solid #000
    box-sizing: border-box
    background-color: #eee
    font-size: 15px
    // 方法2
    &.black
      color: white
      background-color: #222
	// 讓圖片佔寬度80%,否則會超出
img
  width: 80%

4.要讓格子裡面有數字排序,故使用第二段程式碼,並且讓格子黑白相間(使用偶數選擇器),可以看到註解掉的方法1會導致程式碼過長,所以使用方法2,新增一個class名black,再去css新增樣式。

5.接下來把西洋棋的圖片放入指定位置(每七個週期裡面的第三個且黑色格子),可以看以下程式碼的註解。

6.最後做一個hide加上setTimeout的小測試。

// 第一段----------
$(function(){
  for(var i=0;i<7*7;i++){
// li給他一個$字號會自動幫轉換成li的物件
    $('#board').append($('<li>'))
  }
// -----------------

// 第二段--------------------------------
// 讓格子裡面有數字,使用函數
    $('#board li').text(function(index){
      return index
    })
// 要讓格子黑白相間,文字有顏色,但會導致程式碼很長,所以建議使用方法2
  // 方法1 
  //$('#board li:even').css('background-color','#222').css('color','white')
  
// 方法2,jquery新增一個class,再css上面新增樣式
  $('#board li:even').addClass('black')
// -------------------------------------

// 把旗子放入格子中
  var imgurl = "<img src='https://flutterawesome.com/content/images/2019/10/chess512x512.png'>"
  // 每七個週期裡面的第三個加上棋子
  $('#board li:nth-child(7n+3)').html(function(index){
    var isBlack = $(this).hasClass('black')
    // 只要是黑色格子就加上西洋棋imgurl
    if(isBlack){
      return imgurl
    }
   // 現在要來確認是否有black這個class
   // 為了讓程式碼乾淨,所以改寫成上面var isBlack
  //console.log(index+':'+$(this).hasClass('black'))
  })
  // 可以來試試看hide隱藏
  $('img:first').hide(1000,function(){
    // 設定一個計時器
    setTimeout(function(){
      $('img:last').hide(1000)},1000)
    // 第一秒鐘時隱藏第一個,再計時一秒鐘消失下一個
  })
  })

那今天的練習題就到這邊結束囉~今日練習題是資源參考hahow課程的,在此附上codepen連結可以做練習:https://codepen.io/cinj/pen/yLOmWXW


上一篇
day20-重溫Jquery學習日(一)
下一篇
day22-重溫Jquery學習日(三)事件觸發
系列文
走入前端,才從0開始數,初學者歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言